Bug 265048 – [GTK] Slow CSS animations and dropped frames when doing a transition using a gradient as an alpha mask between large images

• Status: NEW
• Component: WebKitGTK

[Jeff Fortin]

Created attachment 468642 [details]
sysprof 45 capture

This is related to bug #264966, but using https://www.kepstin.ca/dump/loupe-crossfade-demo/wipe.html specifically.

The "wipe" effect there is pretty laggy in webkitgtk (on my computer, it just skips the whole animation), and there's no obvious workaround for that from the page code's perspective, as it is animating a very different combination of css properties compared to the stacked animation in #264966; this one here works by applying a gradient as an alpha mask, and animating the position of the mask.

Attached is a sysprof capture, though the presumption here is that the fundamental cause appears to be the same as https://bugs.webkit.org/show_bug.cgi?id=264966#c7 : the images are rendered and scaled on every frame using CAIRO_FILTER_GOOD which is slow and happens on the CPU.

The solution is probably to either:

* Do all those operations in the GPU with something other than Cairo, like Chromium does with Skia, or;
* In the meantime: always use bilinear while there's any animation or scrolling, the same way we do when there's a resize

[Jeff Fortin]

Created attachment 468643 [details]
sysprof screenshot - call graph

[Jeff Fortin]

Created attachment 468644 [details]
sysprof screenshot - flame graph