1698445 - CSS animations on https://www.esprit.de cause a constant 60% CPU load

Status: VERIFIED FIXED

(Testing :: Performance, defect)

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:20210312033752

The high CPU load can be seen on a pages like:
https://www.esprit.de/herrenmode/bekleidung/pullover-strickjacken

Via the devtools I can see that a lot of CSS animations are running on this site. All of these are causing a permanent 60% CPU load for Firefox. It can be divided into the following categories:

• WebContent Process ~40% (main thread at 17%, and all 6 style threads at around 3.5%)
• Main process 20% (main thread ~9%, followed by WR threads at ~5% each)

Here the appropriate profile: https://share.firefox.dev/2Niz1SZ

As it can be seen there is a lot of layout specific activity in the web content process, which might be related to the huge amount of defined CSS animations?

Nevertheless when not doing anything on that page I cannot even see a visible animation. So maybe those are active for hidden elements?

Emilio, could you please have a look?

Btw. when testing that page with Safari it consumes around ~30% only.

Comment 1

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

Actually here a profile with the style threads included: https://share.firefox.dev/3coZy9C

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Yeah, we should be able to throttle those somehow.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: reduced test-case, for posterity

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1698445 - background-position changes should be throttable. r=hiro,boris

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/12e1773e37af
background-position changes should be throttable. r=hiro

Comment 6

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/12e1773e37af

Comment 7

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

Thanks a lot for this extremely quick fix! It works great.

Comment 8

[Albert Scheiner [:alberts]]

Awesome!