(another) glb load error on iOS

[clochardM33]

Description

Hello. I have a model file that crashes the web page (only) on iOS.
It seems to be related to one specific material as when that material is deleted or swapped out the page loads properly.
The issue looks a lot like #3000 and #3067 , but it post dates the fixes in 1.12 for those two, hence this entry.

The fault manifests itself as:
Model loading starts.
Progress bar gets to about 1/3
Very briefly there is bit of text on the page, something about error loading file
Model-viewer then "resets" in that the poster is refreshed and the loading starts again, but this time it skips to the end and then chucks a page error along the lines of "A problem repeatedly occurred on..."

Apart from experimenting with the content of the glb I don't have any other capability to diagnose anything sorry.

The fault occurs on both Safari and (iOS) Firefox. Although with Firefox it drops into a continual reload loop rather than stopping with an error message.

Attached are two glb: the one that crashes and the same file with "Material 26" removed (which is the one that loads correctly).
"Material 26" was generated from a png image mixed with a base colour.

The complication is that the model was created in all innocence, with a very normal workflow and only when it got to the iOS configuration did it not work.

And the final twist is that the glitch site below (which is one page with both models) works fine, whereas the same page either on localhost or on our internal server gives the error. So now I'm really confused.

Live Demo

https://chestnut-lapis-utahraptor.glitch.me

Version

• model-viewer: v1.12 and v1.8

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• [ 1] Firefox
• IE
• [1 ] Safari

OS

• Android
• [ 1 ] iOS v14 and v15.5
• Linux
• MacOS
• Windows

Issue_Texture_ios.zip

[elalish]

So the issue doesn't reproduce on your Glitch? That sounds more like a server configuration problem. Not sure I can do much to help here...

[clochardM33]

Update: The issue does occur on the Glitch link.
Manged to get some time on 3 different iPhones all running iOS 15.5 and it is a consistent fault.
The ancient iPhone SE on iOS 14 that is my only test gear shows different behaviour (hence the final line above). This loads, but takes does a reload (as described above), but if you reload the page then it folds in the way the other phones do. If you open a new tab then you get the first time lucky behaviour.
It has to be something about the structure of the models, but I'm at a loss to work out what it is. Any guidance or insight would be appreciated, but understand that this might not be to do with m-v. Thanks.

[elalish]

Strange, when I try to download your GLBs chrome says they are "blocked", maybe a weird CORS setting? Also they're 15Mb, which is pretty large; you might just be hitting some texture size or GPU RAM limits.

[clochardM33]

Thanks for looking at this. Why is it never straightforward?
If you are downloading from the Glitch URL then you will have to temporarily switch off Safe Browsing as that blocks the download (I'm guessing that's it).
https://support.google.com/chrome/answer/9890866
The same files are also an attachment in the top message as the zip file.

It isn't the size that is directly the problem as for our model sets this is small.
The two files mentioned above have a runtime useage of 16Mb for the "good" one and 9Mb for the "bad" one (I forgot to compress the "good" one).
We have a whole range of sizes and m-v runs beautifully on all of them (on a PC), but the biggest ones do choke older phones.
Most models are in the range 50Mb to 200Mb and an old iPhone SE can just hold that together (you can forget AR at that size though). The largest we have is 325Mb (runtime) and that throws an error in everything but the newest phones.
An obersvation is that on Safari (on iOS) for this massive model it attempts a reload, which is what is happening with the failing file (the one at the start of this thread).

[elalish]

Well, I can repro the reload and eventual crash on my old iPhone SE on iOS 15. Frankly I shouldn't be able to crash a browser even if I try, so this looks like a WebKit bug to me. Would you mind filing it on them? They had a number of WebGL regressions with iOS 15. @grorg in case Apple has any insight here.

[clochardM33]

By all means send it on. Good to know that I'm not goind mad. Thanks.

[henrik-dons]

Hello all,

I have issue with the GLB 3D model on iOS devices.
Demo page: https://divatude.co/product/tbs/

Model does not load on iOS Safari and Chrome.
It uses PBR textures so they can be changed dynamically on the page.
GLB model is valid according to Khronos Validator (https://github.khronos.org/glTF-Validator/)

Any ideas what could be causing this issue?

Best regards,
Henrik

[henrik-dons]

Hello Clochard,
Thank you so much for looking into this and sharing an example!
I will share this with the 3D designer, hope he gets the idea :)
Cheers!

[henrik-dons]

Hello guys,

Any idea why the model viewer on this page crashes?
Works fine on desktop, but crashes on mobile devices...
Can't seem to find any issues with the model itself.

https://pedocpower.com/product/product-to-test-errors/

Any help or insights would be much appreciated!

[elalish]

It's working fine on my Pixel 7 - what mobile devices is it crashing on? Also, for you side-scrolling unit you might consider touch-action="pan-x": https://modelviewer.dev/docs/#entrydocs-stagingandcameras-attributes-touch-action

[henrik-dons]

Hello, sorry it works fine on Android device but not on iPhone.
Tested with iPhone 12 on Chrome and Safari, both crash on page load.

[elalish]

Chrome and Safari are the same on iOS - Apple only allows WebKit browsers. The page certainly shouldn't crash, even if we do something terrible. Please file an issue on WebKit.