Why is this CSS transform tearing on Linux screens

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:

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.

Have you confirmed that vsync is enabled, or are you just assuming? :slight_smile:

Looks fine here in Firefox on Arch with KDE X11.

If you have tearing make sure your compositor has vsync enabled and you might need to tweak your GPU drivers.

I’m guessing it’s not just a browser issue. If you drag a window around the screen quickly you will probably see tearing there too.

1 Like

I assumed :slight_smile:

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.