Babylon Toolkit - mobile touch not working

Questions
1

Hello,

I have a very simple scene in Unity with the scene controller at the top, followed by the camera (with a directional light attached), and a model.

It’s basically just a arc rotate camera that rotates around an Earth model. It works perfectly on Desktop browsers, but when I tested it on Chrome and Safari on IOS, it cannot be interacted with. In other words, dragging on the screen does nothing.

Here is how my scene controller and camera rig are setup:

Merged
Merged.png968×508 89 KB

I have prevent default checked, so I’m not sure what is causing the problem. Any suggestions would be greatly appreciated! Any ideas @MackeyK24?

Thanks! :slight_smile:

1 Like
2

You will need to add this if you wish for touch events be interpreted as mouse events.
https://code.jquery.com/pep/0.4.2/pep.min.js

1 Like
3

Thanks for your suggestion! Actually, pep.js is already being loaded as you can see in the exported project.js:

projectjs
projectjs.PNG1113×271 32.5 KB

I tried removing the conditional so that it would get imported no matter what, but it did not help.

4

I’ve figured it out. I had to add the touch-action=“none” HTML property to the body element. PEP needs it to function properly.

Not sure why the toolkit did not do this automatically. Possibly a bug? @MackeyK24

5

Right I forgot about that too. I also here Safari is close to putting out webGL2, but I have since lost interest in mobile. by now. On to XR!

6

Good catch … that tag was in before … not sure when or why it got removed

7 
   html, body {
            position: absolute;
            min-height: 100%;
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-family: "Segoe UI", "Segoe WP", "Verdana", "Arial";
            background-color: ###SPLASH###;
            touch-action: none;
            -ms-touch-action: none;
        }

Yo @Stefan … I do have touch-action=none on the body … Where did you add… Can you show me a screen shot please so i can figure out what going on with that ?

8

I just added the HTML attribute directly to the body in the index.html inside the outputted Export folder.body
My html, body css matches what you posted… so… maybe it is getting overridden somewhere? :thinking:

9

I found this:

Ah, thank you! To clarify for anyone who comes across this in the future, you need to specify touch-action: none in two places: in the HTML (for browsers that do not support pointer-events and in the CSS (for browsers that do support pointer-events.

HTML:
<canvas id="canvas" touch-action="none"> </canvas>

CSS:
#canvas { touch-action: none }

In my opinion, this could be clarified a bit more in the repository’s README for new, unfamiliar users. Thank you so much for developing PEP!

1 Like