1698644 - CSS animation on https://www.reifen.de/ cause a permanent ~50% load of Firefox

Status: NEW

(Core :: CSS Transitions and Animations, defect, P3)

Description

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

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

The website https://www.reifen.de/ uses a CSS animation with animation-iteration-count=infinite on the image-loader class as used by several images that causes a 50% CPU load of Firefox. It's 10% more than for Safari.

The load is divided into the following buckets:

main process ~38% (mostly WebRender threads)
web content process ~12% (nearly all in the main thread)

Here a recorded profile: https://share.firefox.dev/3cG16fU

Not sure if that is just a web compat bug and that the website shouldn't use infinite here. But given that no animation is visually recognizable I wonder if there could also be done some optimizations on our side.

Comment 1

[Kash Shampur [:kshampur] ⌚EST]

Hey Henrik is this still an issue?

Comment 2

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

CPU load is clearly lower these days. It's mainly the main process which takes up to 15%.

Comment 3

[Frank Griffith Jr]

Boris, can you take a look at this to determine priority and severity? Thanks

Comment 4

[Boris Chiou [:boris]]

Looks like there are lots of div.image-loaders running the lazyLoader keyframes with background-position-x property, (which is running on the main thread). We don't see that because it uses opacity: 0 for these divs. At least right now this doesn't cause high CPU. It just make the main thread keep running a lot of animations. Set P3 and S3 for now.