Remove Mobile Safari Click Delay

| Comments

Did you know that Mobile Safari and other mobile browsers are delaying your click events? If you’ve been testing your mobile site, and it feels sluggish in Mobile Safari, this could be one of the reasons. Disable the click delay and rejoice at a bit more snappy response.

mobile browser delay


Why would a browser vendor build in this “functionality”? Are they purposefully sandbagging their web experience so consumers will be more drawn to a device-specific app instead? As if that could ever happen.

Google, as with most things, has an answer. From a Google Developer article:

The reason for [the 300ms delay] is that the browser is waiting to see if you are actually performing a double tap.

As with the apps Google was developing, the buttons that we’re designing don’t really need this check for double taps. We really just want fast buttons.


Really, most of the work for this problem is figuring out where the slowness is coming from. I spent days and days trying to optimize a single-page web app that had a bunch of buttons with click events that seemed slow for some reason. I came up with all sorts of theories and wasted a lot of time.

Now that you know what your problem is, just download and use a library to solve it. Of the most fantastic, FastClick. It’s easy to use.

Step 1 Include the script in the head tag:

<script type="text/javascript" src="fastclick.js"></script>

Step 2 Attach FastClick to all links on the page (or subset if you wish):
window.addEventListener 'load', ->
  FastClick.attach document.body
, false

Just like that, you’ll see marked improvements. Thank you Apple. Thank you FastClick.