1585856 - SVG path changes on scroll are slow

Status: RESOLVED FIXED

(Core :: SVG, defect, P5)

Description

[rwwagner90]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Steps to reproduce:

I am having an issue with my open source library Shepherd. We use an SVG and change the coordinates for the path inside it on scroll, to create a hole in the svg to highlight elements. You can see a demo here https://shepherdjs.dev/demo/

Actual results:

In Chrome, the hole does not jump around if you scroll up and down quickly and repeatedly, but in Firefox it jumps around a lot.

Expected results:

I would expect Firefox to have a similar performance to Chrome and Safari and not jump as much on the path recalculation. I am not sure if this is a requestAnimationFrame problem, an SVG rendering problem, or just a performance difference in reflows between the browsers.

Comment 1

[rwwagner90]

Things I have tried, but have not helped are:

• Wrap in fastdom to try to group measure/mutate functions
• Use shape-rendering: optimizeSpeed
• Add translate3d(0,0,0) in an attempt to get the GPU to help out
• Use a scroll handler, rather than requestAnimationFrame

I am not sure if there is something I missed trying or not, but so far this seems like a Firefox bug.

Comment 2

[Cameron McCormack (:heycam)]

Thanks for the bug report, Robert. I see a lot of lagging of the clip-path shape when I test on my MacBook, but if I force enable WebRender, it looks fine.

Can you try opening about:config, setting the gfx.webrender.all pref to true, restarting the browser, and trying your demo page again? Don't forget to reset the pref back to false after testing. WebRender isn't currently ready for all platforms and GPUs, but we aim to support it everywhere. So if WebRender fixes the problem we'll probably wait until it's rolled out everywhere.

Comment 3

[rwwagner90]

Hi Cameron,

I do see much better performance with that enabled. Is there a similar feature that is enabled on Chrome and Safari? I was confused to see FireFox being the only browser with the lag. I wasn't sure if maybe I was doing something wrong, and there was a way to get better performance out of FF. Should changing and rerendering SVG paths be supported out of the box or is another approach recommended?

Comment 4

[Mats Palmgren (inactive)]

Sounds like P5 (or wontfix?) based on heycam's comment.

Comment 5

[rwwagner90]

Is there a recommended workaround for this? Since FF cannot handle the changes to the SVG path, is there something that would be more performant?

Comment 6

[Mats Palmgren (inactive)]

Sorry, I'm not aware of any workaround for this.
Fwiw, it looks like people are working hard on fixing the remaining blockers for webrender on macOS (bug 1592016).