1782390 - Using an animated svg as the background of a div can lead to poor performance

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[vaezt]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0

Steps to reproduce:

1. Open https://wf4svy.csb.app/ , the animated SVG is rendered as an image element, FPS is about 60 FPS.
2. Click the "toggle" button, the animated SVG will be rendered as the background of a div element.

Actual results:

• High CPU usage
• FPS dropped to 2 FPS

Expected results:

• Low CPU usage
• 60 FPS

Comment 1

[vaezt]

This problem can be reproduced in these environments:

• Firefox on Linux
• Firefox Android
• Firefox on Windows
• Firefox on macOS (intel x86)

Comment 2

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

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Mayank Bansal]

Default (SVG as image) : https://share.firefox.dev/3bdwV2Z
Toggle (SVG as background of div) : https://share.firefox.dev/3cVy6UT

Comment 4

[Andrew Osmond [:aosmond] (he/him)]

If I make the size in the CSS background image match the image src, 1440x560, the performance is the same. As soon as it goes to 1441, the performance problem occurs. Probably because it switches from background image to repeating image.

Comment 5

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

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

For more information, please visit auto_nag documentation.