Double Tap Issue iOS

I do wonder if it’s related to the double to zoom feature on both platforms. The engine’s touch callbacks hook directly into the browsers native events.

I hate giving out builds to test that I haven’t tried myself but can someone with this issue try this build please? It calls preventDefault on the browser touchEvent which some say should stop the double tap to zoom feature? https://playcanv.as/p/DzCHGrZP/

Will send it to my friend, will get back to you with the results.

Hay @yaustar! Which info do you need?

Seems to work. If @Albertos can confirm there are no regressions, could you share the changes you made?

If you have had this issue (double click not working all the time), can you try the build posted above please :slight_smile:

Oh really? That’s good to hear!: Project: https://playcanvas.com/project/688746/overview/double-tap-bug

If you ignore the console logging, all I did was call preventDefault on the touch event:

DetectDoubleTap.prototype.onTouchStart = function(touchEvent) {
    // Only register a tap if one finger is used at one time
    if (touchEvent.touches.length > 1) {
        console.warn('More than one finger');
        return;
    }
    
    console.log('Tap');
    
    // Check if user has previously tapped within the time window to be registered as a double tap
    if (this.timeSinceLastTap < this.doubleTapSpeed) {
        // User has double tapped so let's perform an action
        this.onDoubleTap();

        // We should also set the timeSinceLastTap to be outside the time window so their third tap
        // won't accidently be registered as a double tap
        this.timeSinceLastTap = this.doubleTapSpeed;  
    }
    else {
            // Reset timeSinceLastTap if the click was done after the time allowed for a double
            // tap to register
        console.log('Missed tap: ' + this.timeSinceLastTap);
            this.timeSinceLastTap = 0;
    }
    
    touchEvent.event.preventDefault();
};

I need to do some more investigation on this as this could be solved with a CSS change and I need to make a change to the API/JS docs of the engine to make this fix ‘official’

1 Like

No I didn’t have the problem and the project works too. (Double tap to change orientation). But I see missed taps in the log, is that oke?

Yeah that fine as that’s due to the gap between the second tap of a previous double tap and a new first tap.

1 Like

I’ve got hold of an iPhone 6 Plus (thanks to my inlaws) with iOS 12.4.5 and I can’t reproduce the original bug either. Double tap works fine in the original project. Has your friend got any assistive settings enabled on the device?

Sorry @NokFrt, I can’t reproduce this issue on Android either with this project: https://playcanvas.com/editor/scene/926464

(Changes colour on the touch end event)

Hi @yaustar . I made a standalone project to test this issue and you are right - the problem on Android is not there but double tap issue on iOS is still present. It’s strange because if I use exactly the same code in my game, I will receive pc.EVENT_TOUCHEND after a second or two even if the finger is still touching the screen.

Here is my test project: http://games.1-easysoft.com/touchTest/ (I use Typescript + Playcanvas engine, I don’t know how to make project in the Playcanvas editor).

This is how I handle touch events:

Game._APP = new pc.Application(canvas, { touch: new pc.TouchDevice(canvas) });
        
if (Game.APP.touch) {
            Game.APP.touch.on(pc.EVENT_TOUCHSTART, (event: pc.TouchEvent): void => {
                console.addEntry("TOUCH START: " + event.changedTouches[0].id);
            }, this);
            Game.APP.touch.on(pc.EVENT_TOUCHEND, (event: pc.TouchEvent): void => {
                console.addEntry("TOUCH END: " + event.changedTouches[0].id);
            }, this);
            Game.APP.touch.on(pc.EVENT_TOUCHCANCEL, (event: pc.TouchEvent): void => {
                console.addEntry("TOUCH CANCEL: " + event.changedTouches[0].id);
            }, this);
        }

(console in not a browser’s console. It’s my object which output lines of text to the screen)

The touble tap iOS bug is present only on some iOS devices. This is my test project: http://games.1-easysoft.com/touchTest/

These are the results:

iPhone X: double tap doesn’t work
iPhone 7 - it works
iPad Mini 2 - it works
iPhone SE - it doesn’t work
iPhone 6S - it doesn’t work
another iPhone 6S - it works

I solved the issue by listening to native touch events:

        let canvas = document.getElementById(canvasID) as HTMLCanvasElement;

        canvas.addEventListener("touchstart", (event: TouchEvent) => {
            event.preventDefault();
            // ...
        }, false);
        canvas.addEventListener("touchend", (event: TouchEvent) => {
            event.preventDefault();
            // ...
        }, false);
        canvas.addEventListener("touchcancel", (event: TouchEvent) => {
            event.preventDefault();
            // ...
        }, false);

	Game._APP = new pc.Application(canvas, { keyboard: new pc.Keyboard(window), /*touch: new pc.TouchDevice(canvas),*/ elementInput: new pc.ElementInput(canvas) });

1 Like

In these tests, it seems that double tap does indeed not work on my iPhone X running iOS 13.5. It also seems that your previous test project (change color at touch input) is not working properly.

All other projects now also no longer work correctly. I just don’t know if this is due to my update from iOS 13.3.1 to iOS 13.5 or if a change has been made in PlayCanvas.

Edit: It looks like only https://playcanv.as/p/DzCHGrZP/ is still working correctly.

@NokFrt thank you for your testing and examples.

In your native event code example, you have used event.preventDefault(). This example does the same thing if you don’t mind testing. https://playcanv.as/p/DzCHGrZP/

If you removed the lines that call preventDefault in your native code example, chances are you will have the same problem of double tapping not working.

No changes in PlayCanvas, our touch events are hooked directly to the native touch events.

The example you linked works because it tells the browser to not handle any non-standard actions via the use of preventDefault on the touch event.

Okay, but first all test projects worked fine for me (without preventDefault), so it may be related to the iOS version as I updated it from 13.3.1 to 13.5.0 yesterday.

Added as an issue to the engine (although the fix may require changing CSS rather than the engine code): https://github.com/playcanvas/engine/issues/2097

PR to expose the browser touch event as API: https://github.com/playcanvas/engine/pull/2096

@yaustar I tried the example (https://playcanv.as/p/DzCHGrZP/) on iPhone 6S and it works.

1 Like

Fantastic, thanks!