1708971 - Up to 160% CPU load due to SVG animations on https://feedly.com

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

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

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:90.0) Gecko/20100101 Firefox/90.0 ID:20210429214231

After opening https://feedly.com you will be presented with a lot of animations on that page. But if you slowly scroll down, and end stop scrolling around the privacy section the CPU load stays high at around 160% even with not a single animation visible in the viewport.

While the CPU load for the main process is the highest (up to 90%) it is split-up across all the different webrender threads. The affected web content process shows most of the CPU load (up to 70%) on the main thread. Here some SVG animation take up a lot of time.

I wonder why we still render these animations even with them not being visible in the current viewport.

Here a recorded profile:
https://share.firefox.dev/3nGdwcx

Also during the the 8s or recording the memory usage of the content process constantly grows and at the end extra 50MB have been allocated.

Comment 1

[Nicolas Silva [:nical]]

There is a feComponentTransfer filter that appears to give the blob rasterization a bad time.

Comment 2

[Gregory Pappas [:gregp]]

Attachment: lottie_player.html

Comment 3

[Gregory Pappas [:gregp]]

Attachment: Feedly robot_render.json

Comment 4

[Gregory Pappas [:gregp]]

Attachment: MakeresearchCollaborative - feedly home principal.json

Comment 5

[Gregory Pappas [:gregp]]

Attachment: Leo-Waving.json

Comment 6

[Gregory Pappas [:gregp]]

Player links:
Feedly robot_render
MakeresearchCollaborative - feedly home principal
Leo-Waving

Comment 7

[Ashley Hale [:ahale]]

The second one is now much faster since gfx.webrender.svg-filter-effects was enabled (Bug 1906212), the other two are unaffected - we're still doing software SVG path rendering.