Bug 290623 – WebGL context loss on demo.epm.agency

• Status: NEW
• Component: WebGL

[Kimmo Kinnunen]

Original reporter reports:

I am also finding this issue reproducible in both Safari and also Safari Webview in Flutter InAppWebView on an iPad Pro 6th generation Safari, iPhone 13 mini Safari, Mac Mini M1 MacOS Safari using the following test website built on ThreeJS if you use the red buttons at the top to directly navigate between the two 3D pages, sometimes the context is lost or on dispose of the WebGL context, the new webpage loading can get stuck in a loop of reloading or load a blank page or crash safari.

https://demo.epm.agency/safarikiller2/threejs/main/

Here is a smaller repro page, I have many websites that this issue happens with only when on Safari on iOS. Webview on iOS and Safari on MacOS on all my devices:

iPhone 13 mini
iPad Pro 2020
Mac Mini M1

https://demo.epm.agency/epmpitest/index.html

[Kimmo Kinnunen]

Initially I can not reproduce the issue with iOS 18.
To the original reporter:

Can you report, for https://demo.epm.agency/epmpitest/index.html
- which versions of the operating systems you are reproducing this?
- what are the steps to reproduce?

[Kimmo Kinnunen]

I can repro by *Click the hotspots in the sample above to move to the next page, then use the red button at the top to go back to the main page

Seems to be out of memory error.

I couldn't reproduce it outside of Safari, is there a reason the memory is kept between web pages as the WebGL context is disposed between page loads.

[Kenneth Russell]

Does WebKit watch for destruction of the JavaScript execution context from HTMLCanvasElement and proactively shut down its rendering context? See in Chromium:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/html_canvas_element.cc;l=1694?q=HTMLCanvasElement::ContextDestroyed

This helps clean up graphics resources more eagerly than having the JavaScript garbage collector discover the unreachable canvas / rendering context / etc.

(In reply to Kimmo Kinnunen from comment #2)
> I can repro by *Click the hotspots in the sample above to move to the next
> page, then use the red button at the top to go back to the main page
> 
> Seems to be out of memory error.

If there is anything I can do to debug why the memory isn't disposed between webpages let me know, both pages I kept the memory footprint small for this repro so I wasn't expecting memory usage to be high enough to trigger an error.

As Kenneth Russel mentioned, is there any rendering context that is not shut down when navigating between the two pages perhaps? For me the crash is intermittent sometimes I can quickly switch between pages and other times the crash can happen quite soon.

In Safari Web Inspector Memory Tab linked to Safari on iPhone 13 mini, the page memory starts at 180mb~ then when changing between the hotspot button linked page and back to the main index via the red button at the top and repeating that in a loop, the memory increases up to 338mb and then I can eventually hit "A problem repeatedly occured on..." Black screen crash.

I have WebGL websites with over 500mb or even 800mb page memory usage that can run fine on this phone unless their context is lost via a page change like in this example.

I suspect this is an issue with the memory of the last page not being cleared.

I have another minimal repro here at 

https://demo.epm.agency/memorydemo/index.html

Use the red button at the top to navigate between 2 pages, one is white and one is green. Expected behaviour is that memory from the last webpage is disposed on navigation but what happens is the memory grows until the new webpage loading causes  "A problem repeatedly occured on..." Black screen crash.

[Radar WebKit Bug Importer]

<rdar://problem/148589473>