Bug 238943 – Safari crashing (out of memory) when scaling SVGs and Canvas

• Status: NEW
• Component: Compositing

[Isaac Besora]

Created attachment 456938 [details]
Flash thing 1 at 45s mark

Hi, everyone.
At Felt we are creating a tool to build maps. This involves having a background with tiled canvases where the basemap is rendered and some SVGs on top of them.

We've been having some issues with the rendering on Safari itself:
- We weren't able to render large paths: https://bugs.webkit.org/show_bug.cgi?id=231157 This was solved in STP 139
- Problems with the Garbage collection of canvases: https://bugs.webkit.org/show_bug.cgi?id=195325 Which we solved with the solution exposed in the first post

What we are finding now is that in STP 142, the whole browser starts doing really weird flashes when we zoom in/out in a map with lots of elements.
I can provide a map to reproduce what we are seeing: https://felt.com/map/Untitled-Map-aMPeGQj2ThqwJf43XpyQCB
Zooming in/out quickly will get to a point were the whole browser screen. including the navbar starts flashing like crazy.
I have also recorded a video, which can be accessed here https://drive.google.com/file/d/1WheqbvMu1nriGjvLijHHxmEFp44cbQ4l/view?usp=sharing
Looking at that video, around 45 seconds in, you'll see the browser starts lagging even though I'm constantly scrolling up/down with the trackpad as I was doing before. 
Later, at the 1 minute mark, you'll see the first occurrence of that flashing thing and later, at 1:16 you'll see an even worse flashing thing.

[Isaac Besora]

Created attachment 456939 [details]
Flash 2 at 1:16

[Isaac Besora]

Sorry, another thing I forgot to mention.
When that flash happens and the screen turns to black, both the MacOS top bar and the dock disappear

[Simon Fraser (smfr)]

What OS/hardware config are you seeing this on?

[Isaac Besora]

It's on an MacBook Air M1 2020 using macOS 12.3.1

[Radar WebKit Bug Importer]

<rdar://problem/91435909>

[Simon Fraser (smfr)]

The page is triggering high memory use because each of the <svg class="c-lggrhN"> elements is triggering a composition layer via "transform: translate3d()" style. When zooming in and out, these layers become tiled, triggering huge memory demand.

You can see this in web inspector by looking at the Layers tab, and turning on layer borders.

[Simon Fraser (smfr)]

I suggest using a non 3d translate, which would group all the svg elements into the layer for the enclosing <div> with a translate3d()

[Isaac Besora]

Thanks for that suggestion Simon.
If you check the link on the first message, you'll see we have changed translate3d to translate as you suggested.

Unfortunately, I can still trigger the same error, even in STP 143

[Isaac Besora]

Hi webkit team, any progress on this?
Thanks for your time!

[Isaac Besora]

Hi everyone!
I've tried the new STP version 144 and it seems like the bug has gotten "worse".
Previously, after some time with the flashing screen the tab would crash and you'd get your desktop back. 
Now, with STP 144, the screen keeps flashing, while not showing the macOS topper or dock, and it doesn't stop so the only way to stop your MacBook is by hard rebooting it via the power button

[Simon Fraser (smfr)]

Hi Isaac

Since it sounds like you're hitting an issue below webkit (webkit should never be able to make the OS crash), could you file an issue with Feedback Assistant so that we can get system/panic logs etc?

[Isaac Besora]

Thanks Simon, I just did.
System diagnose files are added in Feedback Assistant ticket FB10008848

[Isaac Besora]

Just a heads up, tried it again with STP 145 and this is still an issue.

[Isaac Besora]

Tried this with STP 146 and the same thing happens.
I also keep updating the Feedback Assistant issue but I haven't heard back since I filled it.