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:

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.
More about X11’s inefficiencies here:


>> Source Link

Check Also

Looking for a Free Professional Video Editor for Android? Try MOCR!

Video editing is a very resource intensive task and mobile phones are clearly not meant …

%d bloggers like this: