Skip to content

Instantly share code, notes, and snippets.

@AlexKVal
Forked from gajus/README.md
Created February 15, 2016 17:05
Show Gist options
  • Select an option

  • Save AlexKVal/7fa65ded1656634f3034 to your computer and use it in GitHub Desktop.

Select an option

Save AlexKVal/7fa65ded1656634f3034 to your computer and use it in GitHub Desktop.

Revisions

  1. @gajus gajus revised this gist Feb 13, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -15,4 +15,4 @@ The issue:

    > Note that iOS 9.3 has not been released yet. (2016 02 13)
    In [./webpack.js](#file-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.unsure`](https://webpack.github.io/docs/api-in-modules.html#require-ensure) to download [FastClick](https://github.com/ftlabs/fastclick) polyfill to fix the issue.
    In [./webpack.js](#file-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`](https://webpack.github.io/docs/api-in-modules.html#require-ensure) to download [FastClick](https://github.com/ftlabs/fastclick) polyfill to fix the issue.
  2. @gajus gajus created this gist Feb 13, 2016.
    18 changes: 18 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](http://caniuse.com/#search=touch-action).

    > Note that iOS 9.3 has not been released yet. (2016 02 13)
    In [./webpack.js](#file-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.unsure`](https://webpack.github.io/docs/api-in-modules.html#require-ensure) to download [FastClick](https://github.com/ftlabs/fastclick) polyfill to fix the issue.
    11 changes: 11 additions & 0 deletions webpack.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    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');
    }