Safari on macOS: Poor rendering performance

[getflourish]

Problem Browsing and scrolling through the docs is very slow and laggy. High CPU usage. Especially when code blocks come into view.

• Intel MacBook Pro, 8 GB RAM
• macOS 12.4
• Safari

Screen recording You can see poor scrolling performance, invisible content, flickering content.

• excessive CPU usage
• excessive memory usage, up to 300 MB graphics memory when scrolling

https://user-images.githubusercontent.com/183989/195606103-14cebfb3-9c73-41f6-b34e-347eb41aa435.mov

Troubleshooting

• Removing the filter seems to resolve the issue

You probably won’t see this on a M1 or M2. The issue is running the site on an older Macbook on a 5K display. But it’s a sign that there’s a potential issue for anyone with older hardware. With my setup I can spot performance issues in any three.js site, Figma, etc. 😄 But it doesn’t mean that everything is slow. It’s just a sign that there might be excessive graphics memory used (e.g. massive sized layers)

[getflourish]

I think the issue in general are the amount of layers created. One reasons is the use of filter. The other issue is the opacity on .heading-wrapper > .anchor-link.

• 70 layers
• 344 MB memory
• 1529x16513 px compositing

[getflourish]

Issue can be fixed with a local override that disables the filter:

[sarah11918]

Thanks for this! Pinging @hippotastic so that he sees it, too!

[getflourish]

Layers with and without the CSS filter. 84 layers vs. 14 layers. Every CodeSnippet.astro creates these pre/figure elements that cause Safari to create layers.

Together with the fixed elements on the page (body::before gradient and fixed sidebars) Safari starts sweating. Removing the filter alone doesn’t make performance perfect but acceptable :)

Some code snippets will still cause layers because of the overflow: auto but that’s a necessary feature, as seen in this snippet that has actual overflowing content:

[sarah11918]

As the docs site has just had an entire makeover, converted to MDX, does anyone care to take a look at this again and see whether the problem still exists? or exists to the same extent?

[delucis]

Pretty sure this is as “simple” as dropping drop-shadow here:

https://github.com/withastro/docs/blob/0bb3e8f9380bbdff7910ad226570c09a717dedde/src/components/CodeSnippet/CodeSnippet.astro#L143

We can probably get a similar effect with a box-shadow or two although it’s not quite the same thing. If no-one tackles this, we might very probably change this style when redesigning docs in the new year, so will certainly bear this in mind then.

[getflourish]

FYI:

The issue still exists on my old MacBook Pro. I have a new MacBook Air M2 with no issues (as expected).

I hate to report these niche issues related to hardware :'(