CSS animation on https://www.reifen.de/ cause a permanent ~50% load of Firefox
Categories
(Core :: CSS Transitions and Animations, defect, P3)
Tracking
()
People
(Reporter: whimboo, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: power)
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.
|
||
Updated•4 years ago
|
|
Reporter | |
Comment 2•3 years ago
|
||
CPU load is clearly lower these days. It's mainly the main process which takes up to 15%.
|
|
||
Updated•3 years ago
|
|
||
Updated•3 years ago
|
|
||
Comment 3•2 years ago
|
||
Boris, can you take a look at this to determine priority and severity? Thanks
|
||
Comment 4•2 years ago
|
||
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.
Description
•