1656844 - CSS rotation animation for embedded SVG on https://www.tim.pl uses 50% on main process

Status: REOPENED

(Core :: Graphics, defect)

Description

[lukasz.bronicz]

Attachment: memory-report.json.gz

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

1. Open any website (f.e. https://www.tim.pl or https://www.allegro.pl);
2. Open Task Manager;
3. Reload page (Ctrl + R);

Actual results:

4. 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:

5. 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

[Clara Guerrero ( Need Info Brindusa Tot Please)]

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

[Kim Moir [:kmoir] ET]

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

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

Reporter, could you please reopen this once you provide a performance profile?
Or Clara, can you provide a performance profile?

Comment 4

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Attachment: Firefox 2020-09-22 15.50 profile.json.gz

Hi,

My apologies for the delay Kim and Olli.
Let me know if you need further assistance.
Clara

Comment 5

[Clara Guerrero ( Need Info Brindusa Tot Please)]

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

Comment 6

[lukasz.bronicz]

Attachment: about:support

Hi,

sorry for delay, just yesterday I saw the newest message.

about:support

Comment 7

[lukasz.bronicz]

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).

Comment 8

[Neha Kochar [:neha]]

Reopening since the reporter filed new info (6 months ago).

Comment 9

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

(In reply to lukasz.bronicz from comment #7)

And performance profile:

https://share.firefox.dev/3mMDgmO

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.

Comment 10

[lukasz.bronicz]

(In reply to Henrik Skupin (:whimboo) [⌚️UTC+1] from comment #9)

(In reply to lukasz.bronicz from comment #7)

And performance profile:

https://share.firefox.dev/3mMDgmO

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

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

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

[Florian Quèze [:florian]]

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).