HTML5 - Remove 300ms Delay On-Touch/Click - No JavaScript Required!

Posted at

  1. Include a viewport tag in the <HEAD> with specific width definition.
    You may specify a minimal-one: <meta name="viewport" content="width=device-width"/>
    or a bit more complex one with initial-scale: <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,minimal-ui"/> (you may forbid zooming/re-scale by also adding ,user-scalable=no which will slightly improve overall performances and rendering speed).

  2. Second *thing* is to instruct the page to disable double-tap gesture, it is an official technique, recommended by Mozilla/Google.

     * Enable panning and pinch zoom gestures,
     * but disable additional non-standard gestures
     * such as double-tap to zoom. Disabling double-tap
     * to zoom removes the need for browsers to delay
     * the generation of click events
     * when the user taps the screen. This is an alias
     * for "pan-x pan-y pinch-zoom"
     * (which, for compatibility, is itself still valid).
    touch-action: pan-x pan-y pinch-zoom;
    touch-action: manipulation;

    The above rule will be compatible with all the browsers you can think of (yes IE too), and will not require setting any onclick/ontouchstart/ontouchend/etc.. hooking events, neither halt event-bubbling.

    As always with those html-set-rules, you better put the rule-block pretty early in-your CSS-file, you you may have an option to override the touch-action rule with a different value to a specific node, a good place is probably right-after the 'css-clear/zero code' at the start of the file.