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.
Created attachment 456939 [details] Flash 2 at 1:16
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
What OS/hardware config are you seeing this on?
It's on an MacBook Air M1 2020 using macOS 12.3.1
<rdar://problem/91435909>
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.
I suggest using a non 3d translate, which would group all the svg elements into the layer for the enclosing <div> with a translate3d()
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
Hi webkit team, any progress on this? Thanks for your time!
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
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?
Thanks Simon, I just did. System diagnose files are added in Feedback Assistant ticket FB10008848
Just a heads up, tried it again with STP 145 and this is still an issue.
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.