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

**URL:** <https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392>\
**Category:** Bugs\
**Created:** [April 28, 2021, 8:55am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392 "2021-04-28T08:55:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![xeniaeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xeniaeo/32/15579_2.png) [@xeniaeo](https://forum.babylonjs.com/u/xeniaeo)\
**Post date:** [April 28, 2021, 8:55am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/1 "2021-04-28T08:55:22Z")

</div>

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.

 ![Image from iOS](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8e99fe7ed0dbca76860ddf50ab4e8b4517efbd0a.png)

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!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 28, 2021, 1:15pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/2 "2021-04-28T13:15:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![xeniaeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xeniaeo/32/15579_2.png) [@xeniaeo](https://forum.babylonjs.com/u/xeniaeo)\
**Post date:** [April 29, 2021, 3:22am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/3 "2021-04-29T03:22:25Z")

</div>

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](https://github.com/xeniaeo/bjs-modal-demo). And [here](https://bjs-modal-demo.herokuapp.com/modalDemo.html) 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.

---

<div class="post-metadata">

**Author:** ![xeniaeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xeniaeo/32/15579_2.png) [@xeniaeo](https://forum.babylonjs.com/u/xeniaeo)\
**Post date:** [April 29, 2021, 6:54am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/4 "2021-04-29T06:54:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [April 29, 2021, 8:51pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/5 "2021-04-29T20:51:37Z")

</div>

I can repro this.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [April 29, 2021, 9:00pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/6 "2021-04-29T21:00:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [April 29, 2021, 9:03pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/7 "2021-04-29T21:03:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [April 29, 2021, 9:03pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/8 "2021-04-29T21:03:55Z")

</div>

Assigned @PolygonalSun on April 29, 2021, 9:03pm UTC



---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [April 29, 2021, 9:20pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/9 "2021-04-29T21:20:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![xeniaeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xeniaeo/32/15579_2.png) [@xeniaeo](https://forum.babylonjs.com/u/xeniaeo)\
**Post date:** [April 30, 2021, 3:01am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/11 "2021-04-30T03:01:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\
**Post date:** [April 30, 2021, 3:48am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/12 "2021-04-30T03:48:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 1, 2021, 12:15pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/13 "2021-05-01T12:15:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 3, 2021, 7:41pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/14 "2021-05-03T19:41:05Z")

</div>

Unassigned @PolygonalSun on May 3, 2021, 7:41pm UTC



---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 3, 2021, 7:41pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/15 "2021-05-03T19:41:07Z")

</div>

Assigned @bghgary on May 3, 2021, 7:41pm UTC



---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 3, 2021, 7:41pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/16 "2021-05-03T19:41:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 4, 2021, 12:19am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/17 "2021-05-04T00:19:42Z")

</div>

I’ve figured out the issue. Fix incoming.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 4, 2021, 12:45am UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/18 "2021-05-04T00:45:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 4, 2021, 4:11pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/19 "2021-05-04T16:11:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [May 4, 2021, 4:11pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/20 "2021-05-04T16:11:27Z")

</div>

Unassigned @bghgary on May 4, 2021, 4:11pm UTC



---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 5, 2021, 9:06pm UTC](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392/21 "2021-05-05T21:06:32Z")

</div>

@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.

[Next page](https://forum.babylonjs.com/t/open-a-html-modal-from-babylon-and-got-stuck-on-mobile-device-sometimes/20392.md?page=2)
