Screen shadow in iphone

[SahJ]

Hello I have a problem, when I separate the html script and put it aside in a JS and upload it to facebook to do it as an instant game and visualize it on an iphone, touching the screen darkens creating a shadow effect that obscures the scene , it only happens on iphone on a phone with android works fine.
I use babylon js to create the game, it also happens with the example that exists, it only happens when the index.html is linked to the JS.

Any solution?

index.html

lobby.js

[Guest]

Does it happen without facebook instant game? Because this could be related to their franework

[SahJ]

If I upload it to a hosting and when I visualize it with iphone it keeps giving that bug.

Any solution?

 

https://pruebasinstantgames.000webhostapp.com/index.html

[Guest]

This seems related to Sound on iOS. but default iOS does not let you play a sound unless it comes from an user initiated event. So you need a real HTML button 

 

See more here: https://stackoverflow.com/questions/32945273/how-to-autoplay-html5-video-and-audio-tags-on-ios

 

To make sure this is the problem can you remove all the code associated with sound and try again?

[SahJ]

 

Solve the problem by adding a css.

[touch-action="none"] {
    -ms-touch-action: none;
    touch-action: none;
    touch-action-delay: none;
}

body /shadow-deep/ [touch-action="none"] {
    -ms-touch-action: none;
    touch-action: none;
    touch-action-delay: none;
}

[touch-action="auto"] {
    -ms-touch-action: auto;
    touch-action: auto;
    touch-action-delay: none;
}

body /shadow-deep/ [touch-action="auto"] {
    -ms-touch-action: auto;
    touch-action: auto;
    touch-action-delay: none;
}

[touch-action="pan-x"] {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    touch-action-delay: none;
}

body /shadow-deep/ [touch-action="pan-x"] {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    touch-action-delay: none;
}

[touch-action="pan-y"] {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    touch-action-delay: none;
}

body /shadow-deep/ [touch-action="pan-y"] {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    touch-action-delay: none;
}

[touch-action="pan-x pan-y"],
[touch-action="pan-y pan-x"] {
    -ms-touch-action: pan-x pan-y;
    touch-action: pan-x pan-y;
    touch-action-delay: none;
}

body /shadow-deep/ [touch-action="pan-x pan-y"],
body /shadow-deep/ [touch-action="pan-y pan-x"] {
    -ms-touch-action: pan-x pan-y;
    touch-action: pan-x pan-y;
    touch-action-delay: none;
}

 

The problem is that it eliminates the default animations of the babylon buttons, the interface must be created with html and css

[Guest]

Glad you found it!