By default, if you tap on a touchscreen it takes about 300ms before a click event fires. It’s possible to remove this delay, but it’s complicated. I investigated it.
The reason for the delay is double-tap. Once your finger releases the screen, the OS and browser cannot be sure yet if you’re done with your touch action, or if a second tap will follow, which would make the action a double tap (which causes a zoom). The only way to be sure that the action is a single tap is waiting a little while, giving you the chance to make the second tap. Hence the delay.
This article gives a good overview of the problem and the solution. Unfortunately the browser compatibility information it offers is not quite right. See below.
This delay is annoying to web developers. That’s why browser vendors are looking for ways to remove it if at all possible. This is only possible if it’s unlikely that the user wants to double tap — in other words, if the user cannot zoom or is unlikely to zoom.
Now I HATE disabling zooming because it’s Evil. Not uninformed, or a bad idea. Evil. If users need to zoom on your page that’s YOUR fault for not making text and images big enough. So don’t add insult to injury.
That’s why I like the recent Chrome idea of also disabling double-tap when the page uses
width=device-width. If the page is optimised for your device, it’s likely that you won’t have to zoom. And if you have to zoom anyway, pinch-zoom is still available. So this is a nice trade-off, and I’ll be watching the results of Google’s experiment with interest.
But anyway. How exactly can you suppress the 300ms click delay? Advanced web developers will immediately realise that that depends on the browser. I investigated it so you don’t have to. Findings:
width=device-width. Contrary to reports I read, Firefox on Android does not. Also, there is a fairly serious Chrome catch. See below.
user-scalable=no, Chrome, Opera, BlackBerry, and Firefox Android suppress the delay.
initial-scale=1,minimum-scale=1,maximum-scale=1the same browsers suppress the delay, and also UC9 and Dolphin.
(-ms-)touch-action: manipulationor another value that suppresses double-tap zooming.
That’s it, I’m afraid. Any browser not mentioned above gives no way of suppressing the delay.
Unfortunately Chrome is acting weirdly when you set
width=device-width. I test Chrome on the Galaxy S4 phone and the Nexus 7 tablet, and found that, while the delay is removed on the S4, it is not on the Nexus 7. When I tweeted this, Paul Kinlan replied that the Chrome on his Nexus 7 properly suppressed the delay. I don’t doubt that Paul saw what he reported, but it doesn’t concur with my tests.
As far as I know Opera 20 copies Chrome’s behaviour, but I did not test this extensively.
This morning I crowdsourced the tests, and found the following:
I give up. There’s clearly a bug somewhere with suppressing the delay on
width=device-width, especially on Nexus 7, and I assume Google will eventually find it and fix it.
Update: Bug found and it's being fixed. That was fast.
If you like this blog, why not donate a little bit of money to help me pay my bills?