[SOLVED] Black overlay when tapping on the screen in IOS(10.3.2) safari

Help & Support
1

Open a playcanvas app on IOS’s safari, when tapping(no touch move) the screen, a black overlay will show up.
I am very annoy with it. How to solve / remove it ?

2

Does this happen with just a very simple project or just the one you are working on? If the latter, can you share a link to the project or provide another project with the same issue?

3

Not only my project, I’ve test on the “Model Viewer Starter Kit”, the black overlay still here.
Tested on iPhone 5s, 6s, IOS 10.3.2.

4

Here is the screenshot:

xAj2U3n.gifA636×1132

The black overlay appear when you tap the screen.

5

@yaustar @vaios @max Any solutions?

6

I’m not seeing the issue with https://playcanv.as/p/lBg2rBGR/ on an iPhone 6 10.2.1 :confused:

7

:joy: My partner’s IOS 10.2.1(iPhone 5s) do not appear the black overlay too…
Perhaps this is related to IOS.

8

I found a simple solution, just add event.event.preventDefault(); in the touchstart event listener.

TouchInput.prototype.onTouchStartEndCancel = function(event) {
    event.event.preventDefault();
    // We only care about the first touch for camera rotation. As the user touches the screen, 
    // we stored the current touch position
    var touches = event.touches;
    if (touches.length == 1) {
        this.lastTouchPoint.set(touches[0].x, touches[0].y);
    
    } else if (touches.length == 2) {
        // If there are 2 touches on the screen, then set the pinch distance
        this.lastPinchDistance = this.getPinchDistance(touches[0], touches[1]);
        this.calcMidPoint(touches[0], touches[1], this.lastPinchMidPoint);
    }
};
1 Like
9

Hi Scarlex. I have the same problem but I couldn’t figure out how to implement the solution. Can you maybe share the whole touchstart event listener script? I thought that was a default listener script that is available but couldn’t find it anywhere.

Thank you.

10

By default, the camera will have touchInput script:

image.png1751×1223 549 KB

And it will listen touch events:

image.png1117×625 116 KB

What you need is prevent the default behavior of the touchstart event:

image.png856×275 44.9 KB

11

I see. Thanks for the hastly reply.

What happened here was that I started a blank project and this script comes with Model View Example, so I did not have it in the first place.

Anyhow, I took the script and applied to my project, with a few tweaks but then it completely disabled the touch system. (It’s basically needs the orbitCamera script and I just deleted the if segment that requires it.)

so
if (this.orbitCamera && this.app.touch)
became
if (this.app.touch)

I also deleted this line

this.orbitCamera = this.entity.script.orbitCamera;

I was basically using a raycast script that was in the tutorials for my project and it was working with both mouse input on pc and touchinput on iOS by default. So I have no idea how to get these two different systems working together.

This script is specific to the Model View camera orbit project so it doesn’t apply to everything.

I think I’ll need to look elsewhere for a solution.

But in the end, which I think you’ll agree, this screen darkening situation on iOS devices is really annoying and is a good example of how frustrating is to work with Playcanvas. I’m also aware that this is a new system and it has a long way to go and these kind of annoyances are bound to happen.

Thanks though. If anyone else has another solution I’m open to suggestions.

12

This is not related to playcanvas, it is javascript skill. What you need is just listen touch event, prevent the default behavior.

TouchInput.prototype.initialize = function() {
    if (this.app.touch) {
        this.app.touch.on('touchstart', this.onTouchStart, this);
    }
};

TouchInput.prototype.onTouchStart = function(e) {
    e.event.preventDefault();
    // do what you need
};