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:
You might want to look if your configuration has Vsync enabled. Some Linux disros disable this because performance is generally better when its off, but the you do run into tearing in some situations.
The first answer to this stack overflow gives more details about how much the tearing on Linux is primarily due to the out-dated X11 server.
It makes sense when he says:
“The X server provides no built-in means of synchronization between user rendering the window and the screen displaying a window, so the content changes in the middle of rendering.”
Another answer says, that it can be due to the HW drivers and to the vsync lacking in the desktop environment.
“Screen tearing appears mostly because of two reasons - drivers that aren’t there yet, and lack of vsync with certain window managers.”
However, the most common desktop environments (GNOME, Cinnamon, XFCE, etc) do all have vsync enabled.
And drivers on Linux are now very good.
So it makes sense to say that he problem is mostly related to the X server.
I have activated this in XFCE with the Windows Manager Tweaks / composer “synchronize drawing to the vertical blank”. In seems to me that this means vsync. It gavee me an impression that the tearing was reduced and that when it happened it was covering a smaller area. But a 10% change only.
I don’t know at how many level the vsync needs to be activated. Certain mention to configure the graphics drivers for vsync. SO even if I do click on the checkbox that says vsync in XFCE, I still only assume.
I have found more advice, see below, to change the composer to compton. But I did not try since I consider this to be experimental tweaks. XFCE does not use Compton by default for some reason.
The X server has bad performance, but it has less bugs than wayland for certain things. Mainly because of the fact that it is time proven.
As a conclusion of this discussion, I have 3 root causes for this problem:
X server
not sure XFCE really makes good use of the vsync checkbox I have activated in the XFCE settings menu
graphics drivers not well configured regarding vsync on a not well supported graphics card to use the default Linux graphics nouveau driver. nouveau has a reputation of being more stable than if one does tweaks, or uses proprietary drivers.
Did you make the change I suggested so that the sliding panel covers the whole height of the screen? In my case, I also don’t see tearing when the panel is very small on half the screen. The problem only shows up when using the full height of the screen and when clicking 3 clicks/s.
So now we know that not all Linux problems have this problem. So the X Server is now clearly not the only cause of this problem.
Yes, it’s fine. I just tried on my laptop (also arch, KDE but running an AMD GPU instead of Nvidia), no problem.
It’s almost certainly a system wide issue and not just web browser. Try a fast 3d application such as a game or glxgears and you’ll almost certainly see the same issue. Turn on the compositor (so its running hardware accelerated) and try dragging a window around the screen quickly. I guarantee it’s not just chrome or firefox. There’s certainly nothing you can do in the HTML/CSS code to fix it.
