1744848 - Abnormally high CPU usage with SVG animation on headspace.com

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[longwing70]

Attachment: Screen Shot 2021-12-07 at 4.23.01 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:95.0) Gecko/20100101 Firefox/95.0

Steps to reproduce:

I went to Headspace, streamed a session (audio plus simple animation) in Safari, noted the %CPU in Activity barely budged.
https://my.headspace.com/player/204?authorId=1&contentId=151&contentType=COURSE&mode=meditate&startIndex=2

Then streamed the same session in Firefox 93, noted the %CPU rocketed up above 150% and the laptop got hot and the fan kicked up to top speed.

Then I updated Firefox to v95, restarted computer, streamed the same session and... no fix, no change, %CPU and fan rockets up like before.

Actual results:

Computer got hot, fan kicks on to top speed, Activity Monitor reports %CPU usage at 198%.

Expected results:

Similar to Safari v12, should have simply played the audio with little disruption, %CPU usage maybe 35% with no getting hot and not fan at top speed.

Comment 1

[Negritas Sergiu, Desktop QA]

Hello!
I have tried to reproduce the issue using Firefox 95.0 on MacOs 10.12.6 but unfortunately I wasn't able to reproduce the issue. The site you have mentioned has a monthly subscription to create an account.

Could you please answer the following questions in order to further investigate this issue:

1. Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
2. Does this issue happen in the latest nightly? Here is a link from where you can download it: https://www.mozilla.org/en-US/firefox/channel/desktop/
3. Do you have any addons installed if so can you list them?
4. Could you please provide some other site that is free of access similar to the one posted in the descrition?

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Cocoa' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[longwing70]

(In reply to Negritas Sergiu from comment #1)

Hello!
I have tried to reproduce the issue using Firefox 95.0 on MacOs 10.12.6 but unfortunately I wasn't able to reproduce the issue. The site you have mentioned has a monthly subscription to create an account.

Could you please answer the following questions in order to further investigate this issue:

1. Does this issue happen with a new profile? Here is a link on how to create one: https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles
   YES, fresh blank profile with no add-ons has the same problem.

2. Does this issue happen in the latest nightly? Here is a link from where you can download it: https://www.mozilla.org/en-US/firefox/channel/desktop/
   I'm not sure.

3. Do you have any addons installed if so can you list them?
   This problem occurs also in Troubleshoot mode with all addons disabled.

4. Could you please provide some other site that is free of access similar to the one posted in the descrition?
   Just simply start the free trial to see any of the animation videos. To find another relevant free-access site somewhere on the internet with the same problem I would need to be able to identify the similar animation video technology. Is there a tool such as Web Developer Tools that can help identify that specific type of cartoon animation technology? Websites such as Pandora for streaming audio and YouTube for streaming video do not have the %CPU overload problem.

Comment 4

[longwing70]

Attachment: Screen Shot 2021-12-16 at 9.30.38 PM.png

Technology affected appears to be this type of cartoon animation as the colored segments expand/contract.

Comment 5

[John Lin [:jhlin][:jolin]]

Hi,

My Mac has been upgraded to macOS 12 and I don't have access to any that runs macOS 10.12. Could you please help capture a profile by going to https://profiler.firefox.com and following the instructions there for us to investigate the problem? Please make sure to use the Media setting when capturing. Thanks a lot for your help!

Comment 6

[longwing70]

https://share.firefox.dev/32lqbv5

I ran the profile in troubleshoot mode with all extensions off.

Comment 7

[longwing70]

Since I think it's a graphics issue, I ran this profile with the Firefox Graphics setting to capture.

https://share.firefox.dev/32p7UN9

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jimm, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 9

[Markus Stange [:mstange]]

The profile indicates that hardware acceleration is off for you. Could you go to about:support, scroll to the graphics section, and paste the contents of the graphics section here into this bug? It's possible that your GPU is blocklisted.

You can try to override this setting by going to about:config and changing gfx.webrender.all to true. Does this help?

Comment 10

[longwing70]

This comment gave me some ideas for workaround, but the essential problem of the full webpage animation with javascript still uses more resource in Firefox as compared to Safari. With the gfx.webrender.all clue I also discovered the Firefox Performance setting from "Recommended" to "Hardware Acceleration". I do not understand the setting since I would think that hardware acceleration would be recommended. However, combinations of this setting and the gfx.webrender.all from false to true and back again did not seem to significantly affect the processor usage.
I did discover that processor usage has gone down from the original 198% to 100% and sought to find out why.
Because the entire webpage background animates the 4-color rainbow pattern I discovered that making the physical size of the window as small as possible significantly affects the performance. I could get Firefox down to 50-60% with virtually none of the webpage showing. Safari could get down to 30-40%.
The about:support graphics section does indicate that:
"WEBGPU
disabled by default: Disabled by default
blocked by runtime: WebGPU can only be enabled in nightly"

(In reply to Markus Stange [:mstange] from comment #9)

The profile indicates that hardware acceleration is off for you. Could you go to about:support, scroll to the graphics section, and paste the contents of the graphics section here into this bug? It's possible that your GPU is blocklisted.

You can try to override this setting by going to about:config and changing gfx.webrender.all to true. Does this help?

Comment 11

[longwing70]

Attachment: Graphics-webrendertrue.rtf

per request Markus Stange [:mstange]

Comment 12

[Markus Stange [:mstange]]

Thanks! Could you capture another performance profile now that you've enabled WebRender?

(Note to self: The GPU is Vendor ID: 0x8086, Device ID: 0x0d26)

Comment 13

[longwing70]

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

(In reply to Markus Stange [:mstange] from comment #12)

Thanks! Could you capture another performance profile now that you've enabled WebRender?

(Note to self: The GPU is Vendor ID: 0x8086, Device ID: 0x0d26)

Comment 14

[Markus Stange [:mstange]]

Thanks! We're uploading about 14MB of texture data per frame. Most of the CPU usage is probably spent in blob painting for the SVGs.
To fix this, we probably need to wait for hardware accelerated SVG path drawing support in WebRender.

Comment 15

[Brad Werth [:bradwerth]]

With heavy activity in the WindowServer from playing a video, this could be a sighting of Bug 1738926. Would you please see if your issue still occurs with Firefox Nightly, which contains a fix for that issue?

Comment 16

[longwing70]

Attachment: Firefox Nightly-1.png

Comment 17

[longwing70]

Attachment: Firefox Nightly-2.png

Comment 18

[longwing70]

(In reply to Brad Werth [:bradwerth] from comment #15)

With heavy activity in the WindowServer from playing a video, this could be a sighting of Bug 1738926. Would you please see if your issue still occurs with Firefox Nightly, which contains a fix for that issu

After a fresh restart, I downloaded Nightly v98.0a1. I left it in default state and sized the window to half my 4K monitor. On the other half of the monitor I had my regular Firefox v96.0.2. Then I ran and synchronized the animation in both browsers at the same time. Then screen captured the Activity Monitor window showing the %CPU and this is the picture Firefox Nightly-1. It should be noted that the %CPU fluctuates up and down. I tried the setting gfx.webrender.all to true as suggested above and ran the animation in Firefox Nightly itself but did not notice significant improvement, this is Firefox Nightly-2 picture.
Note that I will be upgrading from Sierra 10.12.6 to Mohave 10.14 + updates in order to fix the other Firefox problem I have where I have to wait 2 minutes every time I want to print something. So if this animation issue also persists, I will be representing the later MacOS.