[SOLVED] Black flicker on touch on all iphones (not on the ipad/ android)

Help & Support
1

I have a strange behaviour even with fresh setup project (just the plane + white box) on my iphone 5s (ios 10.3.3)
and my iphone 6 (ios 11.0.3) and only in the portrait mode —

on touch each time there is a short black flicker. This doesn’t happen with the showcase PlayCanvas projects on
the main site, so I assume it’s something new and related to an update on the coding/ or embeding html site?

Is there a workaround already?

Many thanks!

2

Is it this issue: [SOLVED] Dark flicker on touch in some iOS devices

Strange that it doesn’t happen with the showcase projects. What happens when you fork one of those projects try it on your iOS device?

3

Not sure it’s the same thing like in the link, cause I can’t find a touch script attached tomthe camera in a fresh project?!

The ‘keepy up’ demo behaves like this:

Main Menu - each touch creates a black flicker…
Game itself - no flicker when touching
Game over - flicker again when touching the main menu screens

So it seems to depend on detecting the touches in some way.

But why is it happening in a fresh project with just the white plane an box?

4

Another one:
Checking on ‘Flappy bird’ -
Problem exist on the first screen, but not once the game is running
++
Launching it fullscreen from the Main Samples page the blackscreen only flashes in portrait mode
Launching the smaller version in the tutorials section shows the black screen in portrait & landscape mode
(coming from the portrait mode)
– as soon as the top and down ios menu bar (to navigate and share in safari) appears by scrolling the website up and down the problem is gone but appears again without the browser navigation

Can’t you see it on your device(s)?

5

And another one:

‘Lamb canon’ has that issue also on the iPad, in portrait AND landscape mode…
Other demos like the archer or BMW i8 have not ???

6

Okay, I added the script from the other blog post and now it seems to run fine!

Can’t this be ‘natively’ in the engine in some way?

var TouchInput = pc.createScript(‘touchInput’);

TouchInput.prototype.initialize = function() {
alert("!");
if (this.app.touch) {
this.app.touch.on(‘touchstart’, this.onTouchStart, this);
}
};

TouchInput.prototype.onTouchStart = function(e) {
e.event.preventDefault();
};

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);
}

};

7

I think it’s to do with the way the Safari browser handles touches with HTML elements and there are times where you don’t want to preventDefault.

It might also be due to the iframe. Can you try this link which is Keepy Uppy without the iframe? https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/ajGKB8bb/index.html

And compare it with: https://playcanv.as/p/v3toZi7c/

I’m on Android so I can’t test this.

@will or @dave hopefully will be able to explain better than I can.

8

P.S. Both of your provided samples do not show the black flash on the iphone… !?
But launching the project from the editor does…

9

Launching from the editor has extra features and potentially some more HTML elements (hidden?) that the published builds don’t have.