{"id":5765,"date":"2016-03-22T18:32:00","date_gmt":"2016-03-22T17:32:00","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/en\/?p=5765"},"modified":"2016-03-22T18:32:42","modified_gmt":"2016-03-22T17:32:42","slug":"fast-tap-remove-350ms-delay-ios","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/development\/fast-tap-remove-350ms-delay-ios","title":{"rendered":"Fast-tap: remove the 350ms delay on iOS"},"content":{"rendered":"

You certainly know that weird feature on your smartphone that blocks your actions during a little delay (350ms) when you tap an item on your screen? Some JS scripts can be implemented to avoid that delay, but often without any side effect\u2026 Today, it’s possible to do it with only CSS!<\/p>\n

Some explanations<\/h2>\n

This delay has been added to let your device detect a double-tap on the screen, et to let the guy who taps, the time resquested to tap \ud83d\ude42<\/p>\n

But, sometimes, when that double-tap action is not used by our interface it becomes embarrassing especially when your user is waiting for a real reactivity from your web site or your application, and particularly in the context of JS actions with no need in page reload.
\n<\/span><\/span><\/p>\n

Remove the 350ms delay on iOS<\/h2>\n

Sorry for this iOS-only tips, but I found nothing for Android a this time.<\/p>\n

Since iOS 9.3 (update of the day before this post), it’s possible to remove this delay in two ways, one more accessibility-friendly than the other.<\/p>\n

Via the viewport meta<\/h3>\n

Using a meta-viewport containing a width=device-width<\/code> or a user-scalable=no<\/code>, you automagically remove the 350ms delay. Example:<\/p>\n

<meta name=\"viewport\" content=\"width=device-width\"><\/code><\/pre>\n
The accessibility issue arrives using user-scalable=no<\/code>. Void the user of the benefit of a zoom on a website is never a good point. Avoid this value at all costs.<\/p>\n
Via the CSS property touch-action: manipulation
\n<\/code><\/h3>\n
That property is a part of the Pointer Events<\/a> specifications.
\nBriefly, that CSS property has effect when a tap action is done by the user. Values proposed for that property allow free interpretation by the OS, or more restrictive ones depending on which one you choose.<\/p>\n
a {\r\n\ttouch-action: manipulation;\r\n}<\/code><\/pre>\n
The manipulation<\/code> value define that the tap action made by the user exists only to make the page scroll or to zoom on it. Other actions whom could be defined by the auto<\/code> value won’t be done.<\/p>\n
It’s a blurry definition, than OS are free to make various actions depending on elements and depending on its own features.<\/p>\n
On a button or anchor element, or on a trigger defined with JS, the 350ms delay is now removed. It’s already working on this blog, try it by clicking on menu or sidebar buttons. They are super reactive.<\/p>\n
I hope this tips will help you \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
You certainly know that weird feature on your smartphone that blocks your actions during a little delay (350ms) when you tap an item on your screen? Some JS scripts can be implemented to avoid that delay, but often without any side effect\u2026 Today, it’s possible to do it with only CSS!<\/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":[652,650],"tags":[221,678,518],"coauthors":[597],"class_list":["post-5765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css3","category-development","tag-ios","tag-tips","tag-viewport"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/5765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/comments?post=5765"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/posts\/5765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media\/5761"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/media?parent=5765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/categories?post=5765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/tags?post=5765"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/en\/wp-json\/wp\/v2\/coauthors?post=5765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}