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.
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