Screencast SVG incurs a rendering burden on the browser

[ivanreese]

When I load the main repo page in Safari, the screencast SVG renders in a really slow and glitchy way (image below). What's worse, it brings scrolling performance to a crawl (like 2 fps) even when the SVG isn't on screen. Safari struggles to keep up as I scroll down the README, showing large blank sections.

I realize the SVG is smaller than a GIF of the same content — I read the PR discussion about it — but the few dozen KB saved has instead caused a pretty significant amount of layout/paint/compositing work to be done in the browser. (Eg: testing in Chrome, it uses about 50% CPU when the SVG is showing full-window scrolling text). Not sure that's a worthwhile tradeoff, considering the baseline page weight of Github is already around 1MB over the wire, so you're not saving much data, percentage-wise.

I'm on an M1 Pro MBP, so I worry this experience would be even worse for people on less capable hardware.

Anyway, do with this info what you will — I just figure it was worth alerting you to the issue.

[mre]

Hey @ivanreese,

Thanks for the heads-up.

I also have a MacBook M1 (Max, not Pro, but I doubt that matters). The performance is butter-smooth on Firefox and Chrome. I just tried Safari, and I noticed the framerate drops, but I didn't see any artifacts. That's very weird.

Can others comment on this? If it continues to be a problem, I wouldn't mind switching to a video or a GIF.

By the way, the main reason for using SVG wasn't size for me but the fact that glyphs are super sharp at any resolution. I like the crisp look.

[mre]

@ivanreese, can you still reproduce this? Do you still see artifacts?
Also, if someone else can double-check and report back, that would be great.

[ivanreese]

I no longer see artifacts, but it still tanks the framerate, especially when I try to scroll, even if the SVG is offscreen. Looking at the Timeline view in dev tools, I'm seeing the CPU hover around 80-90%.

[mre]

Thanks for the feedback. I'll keep this open then. We need to look into how to fix this. Perhaps we can reduce the frame rate of the animation.