Home / Linux / Why is this CSS transform tearing on Linux screens – HTML & CSS

Why is this CSS transform tearing on Linux screens – HTML & CSS

Why is this CSS transform tearing on Linux screens? Are there techniques with less tearing, such as when using WebGL in a canvas?

When trying the following animation using the CSS property transform,

if I click very fast, there is tearing on Linux computers (Ubuntu, Debian). In both Firefox and Chromium.
One does have to click very fast, like 5 clicks/s. If the duration in milliseconds is increased, more tearing is experienced.

ACtually, there is quite little tearing in that code-pen. But do the following to make the sliding menu use the full screen height. In full screen I get lots of tearing even with 1 click per second. And I wish to understand why.
in the browser’s inspector, delete the node for the CSS/Javascript/HTML edition.
Find the elements for the menu and put the 2 elements fullscreen use the height
They are called menu and app-menu and they lie in an iframe.
Put height: 100vh

Other remark: WHen the browser’s inspector is opened, much more tearing is experience on the small screen sized codepen. So it seems linked to computer resources: memory and CPU.

I experienced more tearing in the case below but it is not using the transform property or the best practices on performances given at the lick above:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

As a side note, it is worth reminding that the X11 server on several Linux distribution is in the process of being replaced by Wayland or alternatively by a new version X12. I am using the X11 server. ANd the X server has lots of performance bottlenecks.
https://www.phoronix.com/scan.php?page=article&item=x_wayland_situation&num=1
More about X11’s inefficiencies here:
https://www.x.org/wiki/Development/X12/

Loading...

>> Source Link

Check Also

5 Movies with the Best Visual Effects You May Not Know

For those of you who are fans of fantasy genre films, you must be familiar …

%d bloggers like this: