Bug 289601 – WebGL context suddenly lost on buffers upload (iOS 18)

• Component: WebGL
• Status: RESOLVED DUPLICATE

[Kimmo Kinnunen]

I have similar issue with pure WebGL2 API (ThreeJS) on same devices, iOS 18
Context suddenly lost on buffers upload. Context can not be created after page reload, requires browser kill-restart.
Can create a minimal example to reproduce, if needed

Here is a zip to reproduce, open index.html with iOS safari
console shows "context lost"
webgl context can not be created until browser killed
https://drive.google.com/file/d/11DlSrLWyvUI4gAmZk8duuzD1HHmgQN4S/view?usp=sharing


From bug 286297

[Kimmo Kinnunen]

Original Reporter, could you provide the exact devices you are seeing the problem?

I cannot repro immediately with iPhone 12 Pro

I do see errors in the console:
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (e9140837.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (index.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (index.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (92ea56b3.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (f7b937b1.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (fabf3b3d.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (File not found) (TrimbimWorker.js.map, line 0)

[Radar WebKit Bug Importer]

<rdar://problem/147409007>

I have been facing the issue with my app on following devices I have access to - 

M4 iPads (Air and Pro) (iOS 18.3.2)
M3 Max Macbook Pro 16" (MacOS 15.3.1)

Issue is not present on my iPhone 12 Pro (iOS 18.3.2) as well as intel/M1/M2/M3 iPads.

May be present in other devices apart from these. Minimum version of my app displaying the diamonds eyewear frame can be found on https://3d.sprie.io/dita_diamonds/

The results are same as the OP has reported. WebGL context lost. Once this occurs, all other WebGL apps stop working. The ones that have been already loaded in other tabs before this error will also break when coming to foreground. New app instance starts with WebGL context lost. Safari needs hard restart to resolve these.
Sometimes entire Safari session becomes corrupted, regardless of whether it has any WebGL components. Sometimes MacBook completely freezes and needs hard restart.

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 video recorded on the iPad Pro demonstrating what happens when I am switching between the 3d webpages a few times before it white screens and crashes. The same behaviour is observed in Webview on iOS.

https://drive.google.com/file/d/1685t3NQEHJQuFPPvKZyuxG6yt-YqPX-u/view?usp=sharing

[Kimmo Kinnunen]

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

Thanks for the report. This page uses 2.7gb of memory when loaded on desktop. If that's same amount on iPad, the context is lost due to running out of memory.

If there's more to this, feel free to comment or open a new specific bug. The more specific you can be and the smaller the reproduction case, the easier it is to fix.

[Kimmo Kinnunen]

> https://3d.sprie.io/dita_diamonds/
Tracking this in bug 290620

(In reply to Kimmo Kinnunen from comment #7)
> 
> > https://demo.epm.agency/safarikiller2/threejs/main/
> 
> Thanks for the report. This page uses 2.7gb of memory when loaded on
> desktop. If that's same amount on iPad, the context is lost due to running
> out of memory.
> 
> If there's more to this, feel free to comment or open a new specific bug.
> The more specific you can be and the smaller the reproduction case, the
> easier it is to fix.

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

*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

[Kimmo Kinnunen]

> https://demo.epm.agency/epmpitest/index.html
Thanks, tracking this in bug  290623

[Filipp Keks]

I can reproduce safari crash with with example https://drive.google.com/file/d/11DlSrLWyvUI4gAmZk8duuzD1HHmgQN4S/view?usp=sharing
iPad Pro (12.9-inch) (4th generation)
Model number: MY2H2HC/A
iPadOS: 18.3.1

after some trial and error, i found out, that this glsl vertex shader line is triggering crash
flat varying vec3 flatNormal;

crash happens even if flatNormal value is unused
probability of crash increases with increase of amount of vertices
when amount of vertices go above ~30000 crash is almost 100%
removing "flat" directive, makes issue disappear completely

[Kimmo Kinnunen]

>crash happens even if flatNormal value is unused

Thanks for confirming. I can repro that this is the same bug as bug 286297.

If the provoking vertex doesn't matter for the renddering, https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/ should be used to ensure good perf on Apple and perhaps Windows devices.

*** This bug has been marked as a duplicate of bug 286297 ***

[Kimmo Kinnunen]

And to add:
The use of WEBGL_provoking_vertex should also solve the context loss.

E.g. add:
const epv = gl.getExtension('WEBGL_provoking_vertex');
      if (epv) {
        epv.provokingVertexWEBGL(epv.FIRST_VERTEX_CONVENTION_WEBGL);
      }

[Filipp Keks]

enabling FIRST_VERTEX_CONVENTION_WEBGL using WEBGL_provoking_vertex extension, fixed the crash
thanx for the tip!