We Keep Coding

Tapped really fast cause skipped click event on iOS devices

I am developing an application that needs to detect the touch(or called tap) event precisely and fastly using Vue.
However, I found that for all of my iOS devices, tapping really fast causes missing tap as shown in the gifs that provided below (even wrongly last touch event is triggered for my iPhone 13 mini, no idea why).
CodeSandbox is also provided below and you guys can try it on your own iOS devices.
Anyone have a solution on it? Great Thanks!
CodeSandBox: https://7l45pm.csb.app/
iPhone 13 mini with iOS version 15.1.1
iPhone 12 Pro with iOS version 14.4
P.S.
My android 12 pixel 4a didn’t get this problem
I tested on both Chrome and Safari browser on my iOS devices, both occuring this problem
I tried cursor: pointer css, changed to use native button DOM, ways to eliminate 300ms delay on click events in mobile Safari, but no one get luck.

PinchZoom.js not working on iOS devices after 13.4 update by Apple

So I have run into a problem again with this plugin- PinchZoom.js which started happening after the 13.4 update by Apple for iOS devices.
The problem is that the double tap feature has suddenly stopped working completely on iOS devices now.
For a concrete test, you can refer to the plugin demo page: http://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html
On iOS devices, you won't be able to double tap to zoom in the image whereas this was working fine in previous versions of iOS.
I have even dived down in the source code of the plugin but I am not sure what is causing the double tap TO NOT work in iOS devices after the update.
If anyone has any idea/workaround for this, it would be very helpful.
Thanks

On all browsers there used to be a delay of 300-350ms on touchstart events. Apparently, on iOS there still is. You can test this by logging tap events and time in the touchstart event listener.
And for your issue, you could either solve it by modifying pinchzoom.js to use touchend which has no delay instead of touchstart, or by preventing default behaviour on the touchstart.
I chose the latter and added event.preventDefault() to the touchstart event listener. You can do that too, until the developer provides an official solution.
el.addEventListener('touchstart', function (event) {
event.preventDefault(); //add this
if (target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});

iOS 7 fullscreen web app delay in firing javascript touchend

I have a standalone web application that used to work fine with iOS 6.
With iOS 7 I noticed that there is a significant delay (several seconds) in firing the javascript touchend event after a finger swipe. The behavior is not consistent, sometimes the first swipe generates the event immediately and only the following ones are delayed.
Is this a known issue and/or there is a workaround?
Thanks.

I was experiencing this same problem with an HTML5 game I'm developing. Sometimes the touchend would seem to fire immediately, and other times there would be a delay of several seconds before it fired.
I stumbled upon this post reminding me of the setTimeout 0 trick for pushing a block of javascript onto the queue for later processing. I was doing a bit of "heavy-lifting" (some DOM manipulation) inside the touchend event handler, and this appeared to disrupt its firing.
I wrapped the code inside my touchend handler with a setTimeout, and that eliminated the delay:
$(document).on('touchend', function (e) {
setTimeout(function(){
//do stuff here...
}, 0);
});

Safari on iOS 7 and HTML5: problems, changes and new APIs: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

iOS 7.1 seems to fix this issue; touchend events fire properly (even without the zero timeout)

Pagehide event on imminent tab switching in Mobile Safari does not fire when running on iPad

It is well know that Mobile Safari pauses Javascript execution on a webpage when
you switch to different browser tab
switch to a different iOS app (e.g. when you get an incoming call the phone app)
You can subscribe to the window's "pagehide" and "pageshow" events to detect imminent suspension and reactivation of Javascript.
The problem is, those events do not fire when tab-switching (1.) on an iPad Mobile Safari. On an iPhone Mobile Safari everything is fine, just as described above.
It's trivial to demonstrate:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener("pagehide", function(evt){
var logger = document.getElementById('log_id');
logger.innerText = logger.innerText + " pagehide fired!";
}, false);
</script>
</head>
<body>
<div id="log_id"></div>
</body>
</html>
It fires on iPads (iOS5 and iOS6 Preview3) only when doing app-switching (2.) and not on tab-switching (1.). All iPhones work fine..
Has anyone been able to detect an imminent tab-switching on the iPad browser?
The reactivation of Javascript when the tab becomes active again can be detected by a heart beat loop as described in this discussion of the same topic.

Try to check focus and blur on document.
Why you need Page Visibility API?
You can use storage event to say other pages, who is active.
You can use timers (setInterval) to check time from last timer fire. And if its more bigger than expected - page was hidden, because most browsers stop timer then page is hidden.

I agree with Pinal: Use focus/blur! But i suggest not on document, but rather on window.
Just register a listener to them and do your stuff in there.
As http://caniuse.com/#feat=pagevisibility states, the feature you want to use is not well implemented. (Edit: Just tested it in a mini test-case - it works on iOS 5/6 - even though caniuse.com asserts different)
If you try to use a timer, you could try requestAnimationFrame as an alternative to setInterval.

Fixed by Apple in iOS7.
(Just tried in the iPad Simulator)

Following from Sebastian's answer, these days (comparing 2013 to 2021) page visibility works reasonably well: see https://www.w3.org/TR/page-visibility/#example-1-visibility-aware-video-playback for more around subscribing to 'visibilitychange' for hidden/visible states.
This seems to be more useful than focus/blur these days as it covers visible-but-not-selected windows if concerned also about multi-window operating systems.

Google Chrome touch events not firing

I'm building a touchscreen kiosk using Chrome (7.0.536.2 dev) in kiosk
mode on a Windows 7 PC with multi-touch display.
I can see that the ontouchstart event is available (by inspecting the
window object in Webkit Web Inspector) but it never fires. If I write
the following code, the onclick event fires when I touch the screen
but the ontouchstart event doesn't.
window.onclick = function() { alert("click"); }
window.ontouchstart = function() { alert("touchstart"); }
In Firefox 4 the MozTouchDown event fires without any problems.
Are these events not yet available to JavaScript?

I experienced this when developing an iPad webapp and tried to test it in Chrome. It turned out, that Chrome recognizes those events, but does not fire them at the moment. This is a bit frustrating, since it breaks support detection in JavaScript.

There is a command-line switch to enable touch events, change your shortcut adding "chrome.exe --enable-touch". Unfortunately, if ('ontouchstart' in window) returns true then, event is never fired. Just tested this on a Windows7 touch-enabled tablet on canary channel. Disappointing... !

as of chrome 20, you can enable touch events from the "about://flags" internal experiments webpage
I did notice that this breaks fastClick, if you're using that - I was :)