{"id":5751,"date":"2016-03-22T17:58:08","date_gmt":"2016-03-22T16:58:08","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5751"},"modified":"2016-03-22T18:23:46","modified_gmt":"2016-03-22T17:23:46","slug":"fast-tap-supprimer-delai-350-ms-ios","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/fast-tap-supprimer-delai-350-ms-ios","title":{"rendered":"Fast-tap : supprimer le d\u00e9lai de 350ms sur iOS"},"content":{"rendered":"

Vous connaissez certainement cette fonctionnalit\u00e9 un peu bizarre sur smartphone qui bloque l’action durant un certain temps (350ms) lorsque l’on tapote sur un \u00e9l\u00e9ment ? Il existe pas mal de techniques en JS pour \u00e9viter ce d\u00e9lai, mais \u00e7a n’est pas toujours sans effet de bord\u2026 Il est possible de le faire en CSS d\u00e9sormais !<\/p>\n

Quelques explications<\/h2>\n

Ce d\u00e9lai a \u00e9t\u00e9 ajout\u00e9 afin de laisser le temps \u00e0 la machine de d\u00e9tecter un double-tap, et \u00e0 l’humain qui tapote d’avoir le temps de tapoter \ud83d\ude42<\/p>\n

Mais dans certains cas o\u00f9 cette action de double-tap n’est pas attendue sur notre interface, il peut devenir g\u00eanant, surtout lorsqu’on attend une certaine r\u00e9activit\u00e9 de la part de l’application ou du site web, notamment dans le cadre d’actions d\u00e9clench\u00e9es en JS qui ne provoqueraient pas n\u00e9cessairement un rafraichissement de page.<\/p>\n

Retirer le d\u00e9lai de 350ms sur iOS<\/h2>\n

Navr\u00e9 pour cette astuce iOS-only, mais je n’ai rien trouv\u00e9 d’autre \u00e0 l’heure d’\u00e9criture de ce billet.<\/p>\n

\u00c0 partir de iOS 9.3 (mise \u00e0 jour de la veille de cette article), il est possible de supprimer ce d\u00e9lai de deux mani\u00e8res, l’une que je trouve pas tr\u00e8s \u00ab\u00a0accessible\u00a0\u00bb, l’autre plus pr\u00e9cise.<\/p>\n

Via la meta-viewport<\/h3>\n

En utilisant une meta-viewport contenant un width=device-width<\/code> ou un user-scalable=no<\/code>, vous supprimez le d\u00e9lai de 350ms. Exemple :<\/p>\n

<meta name=\"viewport\" content=\"width=device-width\"><\/code><\/pre>\n
L’aspect inaccessible ici serait d’utiliser user-scalable=no<\/code>. Priver l’utilisateur du b\u00e9n\u00e9fice d’un zoom sur son site n’est jamais tr\u00e8s bon\u2026 \u00c9vitez cette valeur \u00e0 tout prix.<\/p>\n
Via la propri\u00e9t\u00e9 CSS touch-action: manipulation
\n<\/code><\/h3>\n
Cette propri\u00e9t\u00e9 fait partie de la sp\u00e9cification sur les Pointer Events<\/a>.
\nPour faire simple, cette propri\u00e9t\u00e9 CSS s’applique dans le cas d’une action de toucher (tap<\/em>) par l’utilisateur. Les diff\u00e9rentes valeurs propos\u00e9es permettent de laisser libre l’interpr\u00e9tation du comportement par l’OS, ou de la restreindre de mani\u00e8re plus ou moins forte.<\/p>\n
a {\r\n\ttouch-action: manipulation;\r\n}<\/code><\/pre>\n
La valeur manipulation<\/code> permet de d\u00e9finir que l’action de toucher de l’utilisateur n’est l\u00e0 que pour faire d\u00e9filer la page ou effectuer un zoom. Toute autre action qui pourrait \u00eatre d\u00e9finie par la valeur auto<\/code> n’est pas effectu\u00e9e.<\/p>\n
C’est un peu flou, car libre ensuite aux OS d’effectuer des actions vari\u00e9es suivant l’\u00e9l\u00e9ment et ses fonctionnalit\u00e9s inh\u00e9rentes.<\/p>\n
Sur un \u00e9l\u00e9ment comme un bouton, un lien ou un d\u00e9clencheur d\u00e9fini en JS, cela permet de supprimer le d\u00e9lai de 350ms. Cela fonctionne d\u00e9j\u00e0 sur ce blog si jamais vous ne l’aviez pas encore remarqu\u00e9 (testez les boutons de menu ou sidebar, ils sont super r\u00e9actifs).<\/p>\n
J’esp\u00e8re que cette astuce vous servira.<\/p>\n","protected":false},"excerpt":{"rendered":"
Vous connaissez certainement cette fonctionnalit\u00e9 un peu bizarre sur smartphone qui bloque l’action durant un certain temps (350ms) lorsque l’on tapote sur un \u00e9l\u00e9ment ? Il existe pas mal de techniques en JS pour \u00e9viter ce d\u00e9lai, mais \u00e7a n’est pas toujours sans effet de bord\u2026 Il est possible de le faire en CSS d\u00e9sormais […]<\/p>\n","protected":false},"author":4,"featured_media":5761,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,12],"tags":[228,221,518],"coauthors":[597],"class_list":["post-5751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-veille-technologique","tag-astuce","tag-ios","tag-viewport"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=5751"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5751\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5761"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=5751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=5751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=5751"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=5751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}