How to Remove the 300ms Tap Delay in HTML5 Mobile Apps

One of the biggest telltale signs that an app was built with HTML5 rather than native (which is not inherently a bad thing, be proud your apps are built with HTML5!) is the 300ms tap delay. Any time a user taps anything within your application, the browser powering the application will wait 300ms before actually firing the click event. This contributes greatly to the feeling of the app feeling a little off and slow, and not quite as nice as a native app.

In psychology, seemingly little and unnoticeable differentiations from the norm can have quite a large impact. The ”uncanny valley” is a term used in robotics, and it describes the eerie effect a robot has on a human as the robot becomes more aesthetically humanlike. As a robot becomes more human in appearance, subtle deviations from normal human behaviour become more noticeable and it has the effect of being… creepy.

Unsettling, isn’t it? Image Credit:

Most users are used to native applications, and since we are trying to emulate that native look and feel with HTML5, these slight changes will be noticeable and – although it won’t be “creepy” like the effect in robotics – will have a negative impact on the users perception of your app.

This isn’t a performance thing, the reason for the delay is that the browser is simply waiting to see if the user is performing a single tap or a double tap.

So, how do we get rid of the 300ms tap delay?

The issue of the 300ms tap delay is really quite complex and involves a whole bunch of little technicalities that make this an extremely difficult problem to solve.

Depending on the HTML5 framework you’re using to build your application, the tap delay may already be removed. Ionic for example has this delay removed by default – Adam from Ionic goes into this issue and how they approach it in quite a bit of detail if you’re interested in learning more of the specifics.

But what do you do if you’re using a HTML5 framework that still has the tap delay?

Luckily… some kind people have already solved the problem and have made it extremely easy for you to to get rid of.

There are a few options out there but the best option is FastClick:

Some other options may be just as capable and I certainly haven’t tested them all, but I have heard of other options having issues and causing conflicts so I’d recommend just sticking with FastClick – it seems to work almost universally.

Installing FastClick

This is the best part, you can get FastClick up and running in just a few steps. I’d say you could do it in about 40 seconds if you’re quick with the mouse.

1. Download the minified version of FastClick (alternatively, you can follow the instructions for installing the non-minified version here)

2. Include the file in your project:

<script src="js/fastclick.min.js"></script>

3. Attach the FastClick object to the document after FastClick has been loaded:

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

NOTE: If you try using FastClick the non-minified way, i.e:

FastClick.attach(document.body);

but are including the minified file you will receive errors (telling you that FastClick is undefined). If you are using the minified file you must access it through Origami.

Now you can say goodbye to the 300ms tap delay forever and enjoy the lightning fast responsiveness of your application. In most cases you won’t need to do anything more with FastClick but there are a few features of FastClick I haven’t mentioned so feel free to take a look at the documentation.