Double Tap Issue iOS

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!

Also, this post shows how to access the original browser touch event to call preventDefault Double Tap Issue iOS

Hi there,

This bug was introduced in iOS 13.5 (and iOS 13.5.1 still has it). Even touchstart's event handler doesn’t get called the second time when a double tap occurs. The default double tap zoom is triggered though (which seemingly cannot be suppressed).

I could reproduce this issue in these browsers:

  • Safari (13.5, 13.5.1)
  • Chrome (83.0.4103.88)
  • Firefox (26.0)
  • Opera touch (2.3.2)

Interestingly, however, I cannot reproduce any double tap issues with Microsoft’s Edge (for iOS, 45.4.11). Not sure why, since Apple requires all browsers to use WebKit on iOS.

FYI: emscripten’s touch events suffer from the same issue, as well as many gesture detection JS libraries.

Have you tried the fixed versions above? I’ve also updated the tutorial projects too.

Sorry, forgot to mention… yes, your fix works on iOS 13.5.1 in all the browsers I listed above. I can’t make use of it though, because I don’t use PlayCanvas or JS at all. I just popped in because I saw you guys talking about this issue. :slight_smile:

Ah, I see. Yeah, that’s frustrating since you are using emscripten too. Is there a layer between the emscripten output and the web app that hooks up the two?

A post was split to a new topic: Double click not working on iOS