Fast-tap : supprimer le délai de 350ms sur iOS

Also available in: English

Vous connaissez certainement cette fonctionnalité un peu bizarre sur smartphone qui bloque l’action durant un certain temps (350ms) lorsque l’on tapote sur un élément ? Il existe pas mal de techniques en JS pour éviter ce délai, mais ça n’est pas toujours sans effet de bord… Il est possible de le faire en CSS désormais !

Quelques explications

Ce délai a été ajouté afin de laisser le temps à la machine de détecter un double-tap, et à l’humain qui tapote d’avoir le temps de tapoter 🙂

Mais dans certains cas où cette action de double-tap n’est pas attendue sur notre interface, il peut devenir gênant, surtout lorsqu’on attend une certaine réactivité de la part de l’application ou du site web, notamment dans le cadre d’actions déclenchées en JS qui ne provoqueraient pas nécessairement un rafraichissement de page.

Retirer le délai de 350ms sur iOS

Navré pour cette astuce iOS-only, mais je n’ai rien trouvé d’autre à l’heure d’écriture de ce billet.

À partir de iOS 9.3 (mise à jour de la veille de cette article), il est possible de supprimer ce délai de deux manières, l’une que je trouve pas très « accessible », l’autre plus précise.

Via la meta-viewport

En utilisant une meta-viewport contenant un width=device-width ou un user-scalable=no, vous supprimez le délai de 350ms. Exemple :

<meta name="viewport" content="width=device-width">

L’aspect inaccessible ici serait d’utiliser user-scalable=no. Priver l’utilisateur du bénéfice d’un zoom sur son site n’est jamais très bon… Évitez cette valeur à tout prix.

Via la propriété CSS touch-action: manipulation


Cette propriété fait partie de la spécification sur les Pointer Events.
Pour faire simple, cette propriété CSS s’applique dans le cas d’une action de toucher (tap) par l’utilisateur. Les différentes valeurs proposées permettent de laisser libre l’interprétation du comportement par l’OS, ou de la restreindre de manière plus ou moins forte.

a {
	touch-action: manipulation;
}

La valeur manipulation permet de définir que l’action de toucher de l’utilisateur n’est là que pour faire défiler la page ou effectuer un zoom. Toute autre action qui pourrait être définie par la valeur auto n’est pas effectuée.

C’est un peu flou, car libre ensuite aux OS d’effectuer des actions variées suivant l’élément et ses fonctionnalités inhérentes.

Sur un élément comme un bouton, un lien ou un déclencheur défini en JS, cela permet de supprimer le délai de 350ms. Cela fonctionne déjà sur ce blog si jamais vous ne l’aviez pas encore remarqué (testez les boutons de menu ou sidebar, ils sont super réactifs).

J’espère que cette astuce vous servira.