{"action":"opened","issue":{"url":"https://api.github.com/repos/billfeller/billfeller.github.io/issues/119","repository_url":"https://api.github.com/repos/billfeller/billfeller.github.io","labels_url":"https://api.github.com/repos/billfeller/billfeller.github.io/issues/119/labels{/name}","comments_url":"https://api.github.com/repos/billfeller/billfeller.github.io/issues/119/comments","events_url":"https://api.github.com/repos/billfeller/billfeller.github.io/issues/119/events","html_url":"https://github.com/billfeller/billfeller.github.io/issues/119","id":172091990,"number":119,"title":"Ref: 300ms tap delay, gone away","user":{"login":"billfeller","id":998505,"avatar_url":"https://avatars.githubusercontent.com/u/998505?v=3","gravatar_id":"","url":"https://api.github.com/users/billfeller","html_url":"https://github.com/billfeller","followers_url":"https://api.github.com/users/billfeller/followers","following_url":"https://api.github.com/users/billfeller/following{/other_user}","gists_url":"https://api.github.com/users/billfeller/gists{/gist_id}","starred_url":"https://api.github.com/users/billfeller/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/billfeller/subscriptions","organizations_url":"https://api.github.com/users/billfeller/orgs","repos_url":"https://api.github.com/users/billfeller/repos","events_url":"https://api.github.com/users/billfeller/events{/privacy}","received_events_url":"https://api.github.com/users/billfeller/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-19T09:34:43Z","updated_at":"2016-08-19T09:34:43Z","closed_at":null,"body":"**Ref: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away**\r\n\r\nFor many years, mobile browsers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.\r\n\r\nEver since the first release of Chrome for Android, this delay was removed if pinch-zoom was also disabled. However, pinch zoom is an important accessibility feature. As of Chrome 32 (back in 2014) this delay is gone for mobile-optimised sites, without removing pinch-zooming! Firefox and IE/Edge did the same shortly afterwards, and in March 2016 a similar fix landed in iOS 9.3.\r\n\r\nTo remove the 300-350ms tap delay, all you need is the following in the <head> of your page:\r\n\r\n```html\r\n<meta name=\"viewport\" content=\"width=device-width\">\r\n```\r\n\r\nThis sets the viewport width to the same as the device, and is generally a best-practice for mobile-optimised sites. With this tag, browsers assume you’ve made text readable on mobile, and the double-tap-to-zoom feature is dropped in favour of faster clicks.\r\n\r\nIf for some reason you cannot make this change, you can use touch-action: manipulation to achieve the same effect either across the page or on particular elements:\r\n\r\n```html\r\nhtml {\r\n  touch-action: manipulation;\r\n}\r\n```\r\n\r\nThis technique isn’t supported in Firefox, so the viewport tag is much prefered.\r\n\r\n## Is losing double-tap-to-zoom an accessibility concern?\r\nNo. Pinch zoom continues to work, and OS features cater for users who find this gesture difficult. On Android, maginification gestures takes care of it. Tools like this even work outside the browser.\r\n\r\n## What about older browsers?\r\nFastClick by FT Labs uses touch events to trigger clicks faster & removes the double-tap gesture. It looks at the amount your finger moved between touchstart and touchend to differentiate scrolls and taps.\r\n\r\nAdding a touchstart listener to everything has a performance impact, because lower-level interactions such as scrolling are delayed by calling the listener to see if it event.preventDefault()s. Thankfully, FastClick will avoid setting listeners in cases where the browser already removes the 300ms delay, so you get the best of both!"}}
{"actor":{"display_login":"billfeller"}}