Bug 265048 - [GTK] Slow CSS animations and dropped frames when doing a transition using a gradient as an alpha mask between large images
Summary: [GTK] Slow CSS animations and dropped frames when doing a transition using a ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKitGTK (show other bugs)
Version: Other
Hardware: PC Linux
: P2 Normal
Assignee: Nobody
URL: https://www.kepstin.ca/dump/loupe-cro...
Keywords: Performance
Depends on:
Blocks: GLibPerformance
  Show dependency treegraph
 
Reported: 2023-11-17 10:01 PST by Jeff Fortin
Modified: 2023-11-17 10:04 PST (History)
1 user (show)

See Also:


Attachments
sysprof 45 capture (15.70 MB, application/x-xz)
2023-11-17 10:01 PST, Jeff Fortin
no flags Details
sysprof screenshot - call graph (248.38 KB, image/png)
2023-11-17 10:04 PST, Jeff Fortin
no flags Details
sysprof screenshot - flame graph (90.11 KB, image/png)
2023-11-17 10:04 PST, Jeff Fortin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jeff Fortin 2023-11-17 10:01:09 PST
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
Comment 1 Jeff Fortin 2023-11-17 10:04:39 PST
Created attachment 468643 [details]
sysprof screenshot - call graph
Comment 2 Jeff Fortin 2023-11-17 10:04:59 PST
Created attachment 468644 [details]
sysprof screenshot - flame graph