Model not render in safari IPhone

I am trying to build an application using Babylon.js, but when I visit your website, I encounter errors similar to the ones shown in the image. I also face similar issues in my source code, such as “unable to create uniform buffer.” The devices I am using are iPhone 11 Pro Max, IOS 17.1.2, and iPhone 11 Pro Max, IOS 16.7.1.


js/forum

Hi @Van_Dong_Nguy_n and welcome to the community! :slight_smile:

Is the app working properly on other devices, such as MacBook or some other phones?
I think it’s worth looking into the similar posts:

Thank you for the links you provided. My application works well on devices other than iPad and MacBook. However, for the two devices I mentioned earlier, the application is not functioning. I have tried accessing both devices directly on the Babylon.js sandbox or playground, and I encountered similar errors.

Okay, so first maybe try to read those links I’ve posted and maybe search by yourself on this forum.
Let us know afterwards if you have found the solution or not!

I also encounter a similar issue on iPhone 14 and iPhone 11. Babylon.js is quite excellent, but it seems like this problem is caused by Babylon.js. Does anyone have any solutions?

Can you try setting engine.disableUniformBuffers = true?

thank you for recommend it, I have tried, but my application cannot start, and there is an additional error message ‘unable to create texture.’

I am suspecting that this issue is caused by iOS versions 16.7 and IOS > 17, as I have researched, this error may be triggered by WebGL lost context. It’s not very clear, but some websites using canvas or three.js also encounter this issue. If anyone has a clear understanding of this error, please let me know and provide me with relevant links.

In a somewhat fictional way, I managed to fix it in a simple manner, and I don’t know why, and I don’t understand either, but it worked perfectly.:

 const canvas = document.getElementById(domId) //Is canvas babylon render model
 const gl = canvas.getContext("webgl");
 gl.disable(10);

//.... initialization engine ....

 engine.disableUniformBuffers = true;

Huh, curious, how did you find this method? I checked disable’s documentation WebGLRenderingContext: disable() method - Web APIs | MDN (mozilla.org) and none of the possible values there is 10. But maybe the fix is using disable with an invalid value? iOS is super weird with webgl unfortunately :sweat_smile: anyway I’m glad that it worked for you :slight_smile:

Certainly, I know that a value of 10 is invalid, and I checked on MDN, but it doesn’t seem to affect the browser. However, my application still works. First, I tried searching for documentation and found that many libraries were affected by iOS in relation to WebGL. I tried disabling WebGL 2 in the Safari settings on my phone, and “Oh Wow,” my application started working. So, I speculated that something might be wrong with WebGL on iOS, and I looked for a way to disable it in the browser. As for why I chose the number 10, it’s just because I like it :)))

I’m seeing a similar, perhaps related issue when trying to view assets from the glTF Sample Assets repo in the glTF Sample Viewer, using the provided links in each asset’s readme.

On an iPhone 13, using iOS 17.2.1, and in Safari or Firefox or Chrome, I get the error message “Floating point textures are not supported”.

Maybe this example of similar behavior helps.