a2wd | code & design

Single post

That 300ms lag on mobile

Fastclick.js

An easy-win to improve UX responsiveness in mobile browsers

Fastclick.js | https://github.com/ftlabs/fastclick

In mobile browsers, there is a perceptible 300ms delay between tapping and the click event firing. This is to allow for double-tapping and lends non-native apps a sluggish feel.

The financial times developed a solution to this problem, fastclick.js. This javascript places an event listener on the body element and intercepts the initial tap, triggering an immediate click event.

To use, the fastclick.js script must be included and the listener must be added to the body. For example:

<script src="js/fastclick.js" type="application/javascript">
<script type="application/javascript">
// <![CDATA[
window.addEventListener('load', function() { FastClick.attach(document.body) })
// ]]></script>

There are two caveats to this script:

1. This disables double-tap to zoom (by nature, it disables double taps but pinch-to-zoom is still possible).

2. Some older versions of iOS (earlier than v5.0) don’t allow touch event handlers to trigger focus on other elements (http://ftlabs.github.io/fastclick/examples/focus.html).

08 May 2015javascript / mobile

  • Recent Posts

  • Archives