
IOS browsers have a 300ms click delay - But developers can bypass it - heeton
https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE
======
wgx
Article asserts it's there to detect double taps, but I'd add that it's a very
useful user experience tweak to help deal with mis-taps.

On HN, for example, I'll frequently hit the article link instead of the
comments and this delay (combined with the network latency) often lets me re-
tap the right link.

~~~
tezza
Good point.

What I would say is that my mobile apps have _very_ large buttons. Any 'miss'
could only really occur at the edge of each button.

So in that case I could use the event coordinates in contrast to the
dimensions of the button to decide whether to revert to onClick() behaviour.

    
    
      Edges            ==> onClick()
      Center/Sweetspot ==> onTouchStart()

~~~
heeton
Fantastic tweak! Fast for good clicks, slow for more ambiguous ones.

------
micheljansen
This is a known problem, but it's surprising how often it is overlooked. I
personally use FastClick.js for this
([http://assanka.net/content/tech/2011/08/26/fastclick-
native-...](http://assanka.net/content/tech/2011/08/26/fastclick-native-like-
tapping-for-touch-apps/)), from the guys who did the Financial Times app.

You can see a demo here:
[http://assanka.net/content/tech/files/2011/08/fastclickdemo....](http://assanka.net/content/tech/files/2011/08/fastclickdemo.html)

Of course, that only works if you are on an iOS device.

~~~
mattcg
One of the developers of FastClick.js here. We made this thing because we
thought that the problem deserved a thin compatibility layer as a solution,
rather than forcing developers to rewrite their code to use a different kind
of button all over the place (then rewriting it again when the devices change
their behaviour).

The code is in production use on the FT web app, which is deployed across iOS
devices, Android (both Chrome and the Android browser), Firefox (in test),
Blackberry (both Playbook and phone) and Windows (IE10). We've fixed a bunch
of bugs since the initial release and we should be putting the new code on
GitHub in a few days (<http://github.com/ftlabs>).

Feel free to post questions about FastClick on Stackoverflow if you have any
problems... I'm monitoring it for mentions of FastClick and will answer most
of the time.

~~~
fiznool
Great library, going to give it a shot in one of my upcoming projects.

Quick question - I just tried the demo on IE on a Nokia Lumia 710 running WP
7.5 Mango, and there was no difference between A and B. Do you have any idea
why FastClick might not work on Mango?

~~~
Danieru
They only support Windows with IE10 as he said above?

~~~
fiznool
Yep, saw that, just wondering if there are any insights into why it won't work
for WP7.5, in case it is a work in progress or a complete no-hope.

------
mrspeaker
This article was from 2011 (EDIT: oops, I said 2010 but the article says
"January 2011" - though I'm sure they had it out before then) - I think
everyone who's done iphone web dev is either using this, or has come up with
something similar.

The HTML5 Mobile Boilerplate project uses "Fast Buttons":
[https://github.com/h5bp/mobile-
boilerplate/wiki/JavaScript-H...](https://github.com/h5bp/mobile-
boilerplate/wiki/JavaScript-Helper)

------
Void_
Am I the only one who can't stand when people use IOS instead of iOS?

I don't mind a little typo, but IOS [1] is a completely different operating
system...

[1] <http://en.wikipedia.org/wiki/Cisco_IOS>

~~~
huxley
Yeah, but it's still less annoying than seeing MAC used for Apple's desktop
and notebook line.

~~~
mrsteveman1
Mainstream Apple Computer. MAC.

------
lucian1900
This is already well known, and the case with most browsers on touch devices.

So terrible title, useful article.

~~~
cmelbye
Why is it a terrible title? I personally didn't know about the 300ms delay,
and the title seemed to describe the article perfectly.

~~~
objclxt
Because the title is "IOS browsers have a 300ms click delay", when in fact it
affects a lot of mobile platforms (BB, iOS, WP7, some older Android versions),
not just iOS. The article itself doesn't even _mention_ iOS or iPhone.

------
gdubs
This makes sense for mobile templates where zooming isn't necessary. On sites
that retain a desktop style on mobile devices (nytimes), double tapping is
extremely valuable to zoom in on particular columns. Hopefully developers
don't overuse/misuse this, as it would effectively break that behavior.

------
lazerwalker
For the project I'm working on, whenever I would bind to a 'click' event (via
jQuery.on or a Backbone event hash), I instead just pass in a variable that's
set to either 'click' or 'touchend' based on touch support detection done on
pageload.

If the element is within a scrollable area there's a little bit of extra logic
needed to get everything to work happily (so it doesn't fire the event handler
if you stop scrolling with your finger on the element). In that circumstance
you'd probably better off grabbing one of the many libraries people have
written to take care of this, but if that's not a concern (and it isn't in my
case, since the parts of the app that shouldn't have the 300ms delay don't
scroll), the advantage of this is that the only logic it requires is the touch
detection code.

------
dave1010uk
I created a jQuery plugin called fastClick that does this a while back:
<http://dave1010.github.com/jquery-fast-click/>

~~~
kylemathews
I've used this plugin on a number of webapps. Works great! Very simple to
integrate into my Backbone.js apps.

~~~
dave1010uk
Thanks for the feedback. One problem with GitHub is it's hard to get a sense
of how many people are actually using your project.

------
robocat
I think any solution needs to check that only one finger was touched - some
solutions forget this check. An iOS quirk to be careful of is that the
event.touched array count for a touch event on an element is different if
there is also a touch event registered on document (spooky interaction, but
true).

Also I would check no modifier key (ctrl,alt,shift,meta) is down to handle
mixed keyboard/touch devices. This check is often missed for mouse events, and
causes various UI faults in pages.

------
jancbeck
Googles fast button is too hard to implement imho. I use jquery tappable for
that: <http://aanandprasad.com/articles/jquery-tappable/> Provides a great and
easy interface + fallback for click input.

------
cheeaun
A lot more resources on touch/tap events here
<https://github.com/bebraw/jswiki/wiki/Touch>

------
sil3ntmac
I like cubiq's solution:

<http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone>

It uses event capturing so you can bind the listener to an outer div
containing many buttons, rather than each button individually.

------
ltcoleman
I heard about this a looooong time ago from Scott Jehl at jQuery con in San
Fran. jQuery mobile has known about this for a while. I am glad to see
everybody seems to know about it cause I could definitely see devs getting
frustrated over this.

------
danielschwartz
I actually built something similar to this for where I work. We just recently
open sourced it: <http://jetsetter.github.com/MobileSafariQuickTap/>

------
ck2
Instead of all that complicated workaround, how about just _onmousedown_
instead of onclick.

I'm pretty sure _onmousedown_ fires before click/doubleclick and would dodge
the 300ms delay.

------
illumen
Also, avoid doing as much work as you can inside event handlers.

------
brunnsbe
I guess the tap-event in jQuery Mobile is based on this or am I wrong?

------
Thomaschaaf
Is there a JS fiddle somewhere where you can see the difference?

~~~
micheljansen
Try
[http://assanka.net/content/tech/files/2011/08/fastclickdemo....](http://assanka.net/content/tech/files/2011/08/fastclickdemo.html)

~~~
ferongr
FWIW this is broken on Opera Mobile Android. Tapping Layer B once results in
it switching to green and then back to white, like it was tapped twice. Layer
A works as expected, with a slight delay.

On the stock Gingerbread browser though, both Layers do not respond to taps at
all.

------
pjmlp
Or, how native development still beats "web apps".

------
falling
The article talks about “mobile browsers”. Neither iOS, Safari or even WebKit
are mentioned.

Why does the submission title say “iOS browsers”?

~~~
t413
Probably because it's mostly fixed in Android ICS, as is slyly stated at the
very end of the article:

"We hope that browser developers will solve this problem in future releases by
firing click events immediately when zooming is disabled on the website (using
the viewport meta tag). In fact, this is already the case with the Gingerbread
Android Browser."

~~~
miniatureape
Is it really fixed in ICS? Last time I tried my test case with my ICS phone it
was still happening. Further, the iPhone wasn't exhibiting the ghost click
behavior.

I really wish Google would make the Android browser blow mobile Safari out of
the water. It'd be good for their business. As someone who used to do mobile
web development full time, Android felt like IE 6/7 half the time.

I say this as an Android user.

------
yesyes
Users told us they would rather have tactile buttons as on a PC keyboard or
Blackberry. We're working on a small "smartphone keyboard" for fast "two
thumbs" typing like on a Blackberry. The user can plug it into the smartphone
when the user wants to type quickly and detach it when they are done and want
to store the device.

