1700284 - CSS pulse animation cause a ~25% CPU load of Firefox

Status: NEW

(Core :: Graphics: WebRender, defect, P3)

Description

[Henrik Skupin [:whimboo][⌚️UTC+2]]

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

Steps to reproduce:

1. Open https://www.faszination-tanzen.de/impressum.html
2. Scroll to the button and close the cookie banner
3. Ensure the pulsating heart is in view

Here the CSS definition of the element:

#heartbeat {
  animation: pulse 1s linear infinite;
}

In Firefox this causes ~20% CPU load on the parent process whereby most of it goes onto the Rendering and WRRenderBackend#1 threads. Comparing to Safari, which uses overall only 6% CPU load, this is a 3-4x higher load.

Here the recorded profile: https://share.firefox.dev/3lOVBzC

Comment 1

[Jeff Muizelaar [:jrmuizel]]

What's the rough split between Rendering and WRRenderBackend threads?

Comment 2

[Henrik Skupin [:whimboo][⌚️UTC+2]]

It's basically a 50:50 split between those two threads.

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

(This should be triaged as part of webrender triaging, I think. Removing qf.)