Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0 ID:20210322093509

Noticed today on https://www.wdrmaus.de/aktuelle-sendung/sendung_3.php5. At the top there are two divs (wolken1 and wolken2) that use a CSS animation to shows moving clouds. The CSS animation is implemented by changing the background-position-x for a 800x200 image.

It takes up to 45% of CPU load for the main process and 15% CPU load of the web content process. The main process spends ~35% in WebRender related threads (WRSceneBuilder#1, WRRenderBackend#1, Renderer, Compositor) and 6% in the main thread. The web content process' load is nearly all in the main thread (10%).

Here a profile: https://share.firefox.dev/2PAESnm

Comparing to Safari, which uses 10% of CPU in total, this is 600% more with a recent Firefox.

I can reproduce a large amount of renderer activity on macOS. The renderer is spending most of its time in draw_alpha_batch_container. I've attached a frame capture. Glenn, can you investigate, please?

I took a brief look at the profiles. There doesn't seem to be anything particularly unexpected in them, it looks like this is a test case where we are probably just significantly slower than Safari due to the way we currently need to build, transfer and process 2 display lists each time this property is animated.

We have ideas and some plans to improve this case significantly in future, but it relies on us getting the WR deployment to 100% first, so that we're not targeting display lists to multiple rendering backends and can refactor / simplify how this works.

Linked to the incremental-perf bug to track this work.

(This is tracked as part of WR perf work, removing qf)