Open a html modal from Babylon and got stuck on mobile device sometimes

Hi,

I’ve been tackling with this issue for days, and can’t figure out what I did wrong.
BJS version: Babylon.js v5.0.0-alpha.19

So I have a html page and have implemented a babylon scene with createScene inside the script.
I have also wrote a modal under HTML DOM structure. When a mesh with a specific name is clicked, the modal should open up, and then user can click on a close button to close it.

I detect the click with scene.onPointerObservable to detect POINTERPICK event. And when a mesh is clicked, I set the CSS style.display of the modal from “none” to “flex” so the modal will display.

Sometimes it works ok and everything is normal, but sometimes when I open the modal, I cannot close it by clicking the close button on the modal. It seems to be stuck there for a few seconds, and then the modal will close. If I click again on the mesh to open the modal, the same thing happens again.

Here is a screenshot of the web inspector from iphone safari with the latest OS (14.4.2). As you can see, the main thread is blocked for a few seconds and CPU usage is high.

If there’s any workaround for this or if there’s any misunderstanding from my side, please let me know! Thank you!

Note: on PC, everything works as expected.

p.s.: Thanks for making Babylon.js possible, as a Unity dev who is new to all this, I have lots of fun learning it and see huge potential ahead!

1 Like

This is so weird :frowning: Could you try to repro the issue in the playground ??? so we could double check what is wrong here.

Hi @sebavan thanks for the reply!

As this is related to BJS interacting with html, I can’t repro the issue in the playground. I’ve put together a html file that can repro this one and put the source on github here. And here is a working link for test. Hope this helps!

From my test, this issue only appear on iOS device (both Safari & Chrome; tested OS version 14.4.2, 14.3). If at first the issue didn’t happen when you first try to close the modal, it won’t happen that time. You’ll have to quit and restart the browser app to see if you bump into that issue.

1 Like

Tested with Babylon.js v4.2.0 and didn’t seem to run into this issue!

I can repro this.

@xeniaeo Can you host a version that uses the babylon.max.js instead of babylon.js? That will be much easier to debug.

cc @PolygonalSun

I’m debugging the minified code, so it’s very hard to read, but I think this is related to the DeviceInputSystem. Something goes very wrong when the close button is clicked.

It could be related to the DeviceInputSystem. My first thought is that it might be related to the pointerBlurEvent function. I’ll have to dig deeper and see what’s going on.

1 Like

I’ve changed it to babylon.max.js, thanks for the help!

1 Like

for some reason ios is making it hard for developers to create pwa related apps.

1 Like

I am also facing this issue randomly while using bootstrap’s html modal. some times it works normally but some times it takes 20-30 seconds to open/close a modal, not sure how can I debug this.

I’ve been looking at this. It’s a tricky one. Haven’t been able to narrow it down yet.

1 Like

I’ve figured out the issue. Fix incoming.

This PR will fix the problem: Fix perf issue in web impl of deviceInputSystem by bghgary · Pull Request #10311 · BabylonJS/Babylon.js (github.com)

1 Like

This should be fixed in today’s build. Let me know if it works.

1 Like

@bghgary I still encounter this issue, using Chrome on Mac with BabylonJS v5.0.0-alpha.20, Just a note, I have a href link in html ( html is floating above canvas), upon click href link it opens my modal, which sometimes is causing delay behaviour.