"Context Lost" when backgrounding Safari on iOS 17 Developer Beta 8

Questions
,
1

On iOS 17 developer beta (beta 8), on tablets only (presumably a problem with iPadOS):

If you open up the ThreeJS playground (just the empty one https://threejs.org/playground/) and background it while it is loading, and then bring it back to the foreground, the webgl scene fails to create and we get an error “THREE.WebGLRenderer: Context Lost.”, and the webgl context is hosed. This error was not present in beta 7.

We are seeing this in our applications as well when backgrounding them (we are actually using a different WebGL library, but can reproduce it even in ThreeJS). For our applications, this also happens periodically when we background them even after they are already initialized.

I’m sure this isn’t an issue with ThreeJS itself, but with iOS, but we are struggling with figuring out the “why” so we can work around it, and were hoping someone inside of ThreeJS may have some knowledge of where to look since we can reproduce inside of the playground.

Thank you.

2

Maybe it’s best if you just report this issue to the WebKit bug tracker. Apple should be informed about this potential WebGL regression.

https://bugs.webkit.org/

1 Like
3

I have posted to 3 different Apple reporting sites and have yet to hear anything back. Considering iOS 17 is due for public release soon, we were hoping someone with more low-level knowledge of the WebGL system may have come across this issue as well, or may have some indication of a fix/workaround.

I have seen some promise in disabling any code that interacts with our Babylon engine, when the Safari window is backgrounded, but it seems to more mitigate the issue than resolve it.

4

Assuming the new behavior of iOS/WebKit is intended, then you have to add a listener to the webglcontextrestored event and recreate all WebGL entities (e.g. render targets used as environment maps) for your app. A webglcontextlost event is not an error per se. It’s something that can happen at any time and WebGL apps in production should normally always properly react on this event.

That said, most three.js demos ignore the webglcontextlost event for simplicity reasons.

1 Like
5

Hey there. I also have this issue on Safari 16.7.2 on iPhone. It happens when backgrounding the app and accessing the website through instagram browser. My understanding is that recreating the entities happens automatically? Or at least there is some inbuilt Three js response the the context lost / restored event? Do you know any resources covering how to implement error handling for this event? When the error happens (it is logged repeatedly), it prevents me accessing the application through any browser on mobile. The only way to reset it is to clear the cache.

6

We used the following as a workaround:

  canvas.addEventListener('webglcontextlost', () => {
    window.location.reload();
  });

Hope it helps.