1617497 - animations on svg polygons perform better on Chrome than Firefox

Status: RESOLVED INCOMPLETE

(Core :: SVG, defect, P3)

Description

[Karl Dubost💡 :karlcow]

As reported by the user:
on https://webcompat.com/issues/48506

Just visit the site. Everything becomes laggy. CPU usage will increase. Maybe it's something about the background animation/CSS

I didn't notice a lag, but indeed the cpu is a bit higher than in chrome.
I recorded a performance profile on firefox
https://perfht.ml/2T6G2VS

The page contains an svg used as a background which itself has around 57 animated polygons and there's apng with an applied linear gradient with transparency to give colors to the svg.

not sure if it should be considered as a perf issue.

Comment 1

[Cameron McCormack (:heycam)]

It looks like a lot of time spent painting the SVG background image. Markus, is this expected given the content?

Comment 2

[Markus Stange [:mstange]]

Somewhat expected - it's a big background image and it contains some opacity animations. Opacity animations inside svg-as-image are expected to be less efficient than opacity animations in inline SVG that's embedded into the page.

Comment 3

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

This is pretty bad on linux.

Comment 4

[Robert Longson [:longsonr]]

I think the site has gone.