Skip to content

Instantly share code, notes, and snippets.

@Chenzo
Forked from gajus/README.md
Created February 19, 2016 18:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Chenzo/84a10576cac61ebd03be to your computer and use it in GitHub Desktop.
Save Chenzo/84a10576cac61ebd03be to your computer and use it in GitHub Desktop.

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

touch-action is now supported by all major mobile browsers.

Note that iOS 9.3 has not been released yet. (2016 02 13)

In ./webpack.js I am first detecting if the touch-action property is supported. If it is, I am using it to set the style of document.body. If it is not, then I am using webpack require.ensure to download FastClick polyfill to fix the issue.

if ('touchAction' in document.body.style) {
document.body.style.touchAction = 'manipulation';
} else {
require.ensure(['fastclick'], (require) => {
const FastClick = require('fastclick');
window.addEventListener('load', () => {
FastClick.attach(document.body);
});
}, 'fastclick');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment