CSS rotation animation for embedded SVG on https://www.tim.pl uses 50% on main process
Categories
(Core :: Graphics, defect)
Tracking
()
People
(Reporter: lukasz.bronicz, Unassigned, NeedInfo)
References
(Blocks 1 open bug)
Details
(Keywords: power)
Attachments
(3 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Steps to reproduce:
- Open any website (f.e. https://www.tim.pl or https://www.allegro.pl);
- Open Task Manager;
- Reload page (Ctrl + R);
Actual results:
- When page is reloading, CPU usage raises up to even 60% for only one page opened in Firefox, much more than "slower" Chrome with couple websites opened;
Expected results:
- CPU usage should be stable - in reproduce we use only one page to reload, when there is more websites opened, Firefox could use even more CPU power.
Comment 1•4 years ago
|
||
Hi,
Thanks for the details. I was able to reproduce on windows10 pro, on the following versions
release 79.0
beta, 80.0b4 (64-bit)
nightly 81.0a1 (2020-08-07) (64-bit)
I can reproduce with https://www.allegro.pl/ but not with https://www.tim.pl/
Can you attach your about:support information?
I will move this over to a component so developers can take a look over it. If is not the correct component please feel free to change it to an appropriate one.
Thanks for the report.
Best regards, Clara.
Comment 2•4 years ago
|
||
lucasz: Could you also capture a performance profile the next time you see this? https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem
Comment 3•4 years ago
|
||
Reporter, could you please reopen this once you provide a performance profile?
Or Clara, can you provide a performance profile?
Comment 4•4 years ago
|
||
Hi,
My apologies for the delay Kim and Olli.
Let me know if you need further assistance.
Clara
Comment 5•4 years ago
|
||
I tried again and can still reproduce in nightly version 83.0a1 (2020-09-22) (64-bit), both https://www.allegro.pl/ and https://www.tim.pl/ websites.
Best,
Clara
Reporter | ||
Comment 6•4 years ago
|
||
Reporter | ||
Comment 7•4 years ago
|
||
And performance profile:
https://share.firefox.dev/3mMDgmO
I noticed another weird thing - in the newest Firefox build CPU didn't raises up to 60% (max 40-50% on my PC, still quite high when you realize, that this is for just one website), but when I refresh the page, CPU usage is quite stable 30% (after initial 40-50%) for a minute or two (just 6 processes, Chrome with 42 processes go 5-6% CPU usage after a couple of seconds).
Updated•4 years ago
|
Comment 8•4 years ago
|
||
Reopening since the reporter filed new info (6 months ago).
Comment 9•4 years ago
|
||
(In reply to lukasz.bronicz from comment #7)
And performance profile:
Lukasz, sorry that no-one checked this profile. Given that it is already 6 months old, would you mind to create a new one with a most recent version of Firefox? Maybe even Beta or Nightly? Thanks a lot.
Reporter | ||
Comment 10•4 years ago
|
||
(In reply to Henrik Skupin (:whimboo) [⌚️UTC+1] from comment #9)
(In reply to lukasz.bronicz from comment #7)
And performance profile:
Lukasz, sorry that no-one checked this profile. Given that it is already 6 months old, would you mind to create a new one with a most recent version of Firefox? Maybe even Beta or Nightly? Thanks a lot.
Sure thing :)
Firefox Nightly: https://share.firefox.dev/3sCvfn1
Firefox Beta: I had some problems with profiler, if you need this badly I can check that and try to profile it anyway.
FYI: since I created this ticket IMO CPU is used much better, there is no 1-2 minutes freezes at tim.pl or allegro.pl that I saw earlier.
Comment 11•4 years ago
|
||
While there is quite a bit of Javascript execution in that profile I can also see a good amount of CPU spend in GFX. As such I checked that page myself and it looks like the embedded SVG (tim_cat_fotoanim) including it's rotation CSS animation is causing the high load on the main process mainly for the WRRenderbackend
and Renderer
threads.
Turning this animation off via DevTools the CPU load drops from ~40% to just 6%. As such I'm going to move this bug into the graphics component. Maybe it's similar to other CSS animation related issues like bug 1700284?
Comment 12•3 years ago
|
||
I captured profiles on a recent build of https://www.tim.pl/ https://share.firefox.dev/3uvhSbF and https://www.allegro.pl/ https://share.firefox.dev/3rinIeq
They both use plenty of CSS animations and look like nice test cases for the more detailed animation markers I landed in bug 1757202.
On https://www.allegro.pl/, the animation that repeats infinitely is a loading throbber with a transform: rotate
animation in a lazily loaded div at the bottom of the page. If I scroll down all the way, the animation stops: https://share.firefox.dev/37dLOA1
It looks like the off-screen animation is already mostly not running, the only waste I see in the profile is that we keep having refresh driver ticks at 60Hz, but on the compositor side not much seems to be happening (the animation is not sampled).
Description
•