Contact emails
fla...@chromium.org, liviu...@chromium.org
Explainer
https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
Spec
N/A. https://www.w3.org/TR/css-device-adapt-1/ only describes how to interpret the viewport tags.
Tracking bug
Summary
Double-tap-to-zoom (DTZ) is a magnification gesture used to zoom into text. In Chrome, DTZ is currently enabled if it is possible to zoom at all. Currently, DTZ is disabled when:
zooming is disallowed (min-zoom equal to max-zoom) or
the content width fits the viewport width.
The viewport tag is intended to allow developers to avoid using a desktop layout. However, even if the viewport tag is set properly, the content of the site may be wider than the viewport, enabling DTZ in Chrome.
There is a delay of 300ms between touchend and click events to allow detection of a possible double tap gesture. This delay greatly affects UI responsiveness for single-tap gestures (see video example in the explainer link above) and is also a major contributing factor to Core Web Vitals First Input Delay metric.
We intend to fix the behaviour by disabling DTZ when the viewport tag is set by the developer to specify a responsive design as below:
To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:
zooming is disallowed, or
the content width is smaller than the viewport width, or
the viewport tag specifies width=device-width or initial-scale=1.0 as described above.
Our current implementation has the first two conditions (A and B) only, and we will make the set of pages that disable DTZ strictly larger. Using the viewport tag information (condition C) will ensure that Chrome disables DTZ regardless of the content width (condition B).
In all of these cases, the site’s layout viewport width will be the device width, which means that content should be large enough to be usable without zooming. It is often surprising to developers that if they accidentally have an element larger than the viewport it will enable DTZ in these cases. Mobile Firefox already implements this behaviour.
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
No. This behaviour is mobile Chrome specific.
Demo
Test cases (all horizontally scrollable):
1. https://output.jsbin.com/hojutuw/quiet width=device-width initial-scale=0.5
2. https://output.jsbin.com/fodilah/quiet initial-scale=1
3. https://output.jsbin.com/duxofug/quiet width=device-width
Compat table: DTZ enabled?
Mobile Chrome 1. Y 2. Y 3. Y
Mobile Firefox 1. Y 2. N 3. N
Mobile Safari 1. Y 2. Y 3. Y
Mobile Edge 1.Y 2.Y 3.Y
After this fix, Chrome will behave as Mobile Firefox (Test cases 2, and 3 will have DTZ disabled).
Risks
We believe that the risk is not high, as these sites have expressed an intent to be usable at the device’s native scale. Furthermore, users can always fall back to using pinch to zoom.
We are adding a feature flag named RemoveMobileViewportDoubleTap defined in this (work in progress) CL. Once the CL lands, one can try the feature by using --enable-features=RemoveMobileViewportDoubleTap in the command line.
Interoperability and Compatibility
Firefox: Fully compatible for condition C above.
Edge: Expected to follow Chrome behavior.
Safari: Behaviour inconsistent for condition C above.
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
The DTZ behaviour is not standardized and as such is not tested by web-platform-tests.
Entry on the feature dashboard
https://www.chromestatus.com/guide/edit/5129116799991808
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN2PR13MB3232B7A3737D3DC62A9FE648DF819%40MN2PR13MB3232.namprd13.prod.outlook.com.
Is this change different from what we shipped back then? Is this fixing a regression?
Contact emails
fla...@chromium.org, liviu...@chromium.org
Explainer
https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
Spec
N/A. https://www.w3.org/TR/css-device-adapt-1/ only describes how to interpret the viewport tags.
Tracking bug
Summary
Double-tap-to-zoom (DTZ) is a magnification gesture used to zoom into text. In Chrome, DTZ is currently enabled if it is possible to zoom at all. Currently, DTZ is disabled when:
zooming is disallowed (min-zoom equal to max-zoom) or
the content width fits the viewport width.
The viewport tag is intended to allow developers to avoid using a desktop layout. However, even if the viewport tag is set properly, the content of the site may be wider than the viewport, enabling DTZ in Chrome.
There is a delay of 300ms between touchend and click events to allow detection of a possible double tap gesture. This delay greatly affects UI responsiveness for single-tap gestures (see video example in the explainer link above) and is also a major contributing factor to Core Web Vitals First Input Delay metric.
We intend to fix the behaviour by disabling DTZ when the viewport tag is set by the developer to specify a responsive design as below:
To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:
zooming is disallowed, or
the content width is smaller than the viewport width, or
the viewport tag specifies width=device-width or initial-scale=1.0 as described above.
Our current implementation has the first two conditions (A and B) only, and we will make the set of pages that disable DTZ strictly larger. Using the viewport tag information (condition C) will ensure that Chrome disables DTZ regardless of the content width (condition B).
What about <meta name="viewport" content="width=device-width, minimum-scale=1.0">? We have recommended that exact pattern in the past.
I agree that we should be more aggressive in avoiding DTZ (and thanks for pushing on this!), but if we're targeting a subset of pages with an "avoid desktop layout" viewport tag, what's the justification? What % of "avoid desktop layout" pages are we leaving with DTZ?
What about <meta name="viewport" content="width=device-width, minimum-scale=1.0">? We have recommended that exact pattern in the past.Right now (Chrome 88.0.4324.181) DTZ is enabled with this meta viewport tag. See: https://liviutinta.github.io/meta-viewport-tag/device-width-minimum-scale-1.htmlWith this fix (condition C) DTZ would be disabled in this case.Right now, one needs "minimum-scale=1.0, maximum-scale=1.0" in order to disable DTZ (condition A).
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHaAqYKW_m7qPbEG5MumDXT1eYyzkX70mUm2CXn%2BGeTNuQw1fQ%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPy%3DJoovzq5zH6rpT20T1u%2BkfnfpUHp1M4pqoa7TtHQ3KowOAg%40mail.gmail.com.
Can you be more specific? Do the following also disable DTZ?
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="viewport" content="width=device-width, height=device-height">
<meta name="viewport" content="initial-scale=1.0, height=device-height">
What about <meta name="viewport" content="width=device-width, minimum-scale=1.0">? We have recommended that exact pattern in the past.
This seems like it probably should also disable DTZ given that the use case we are intending to still support with DTZ is sites which require you to zoom in to see components. If minimum-zoom is 1 then you are already zoomed in to at least 1.
I think you are right that we should be including minimum-zoom=1, that basically implies initial-scale is at least 1.
What about <meta name="viewport" content="width=device-width, minimum-scale=1.0">? We have recommended that exact pattern in the past.
This seems like it probably should also disable DTZ given that the use case we are intending to still support with DTZ is sites which require you to zoom in to see components. If minimum-zoom is 1 then you are already zoomed in to at least 1.
Condition C will disable DTZ in this case because width=device-width is present.I think you are right that we should be including minimum-zoom=1, that basically implies initial-scale is at least 1.Do you mean that a meta viewport tag like this one:<meta name="viewport" content="minimum-scale=1">should behave like:<meta name="viewport" content="initial-scale=1">and should disable DTZ ?
Yes, minimum-scale=1 essentially means initial-scale will be 1 (or greater), so the content should be readable without additional zooming according to the specified viewport. Anything that implies the site is designed to work at a >=1 scale could probably count.
To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:
zooming is disallowed, or
the content width is smaller than the viewport width, or
the viewport tag specifies width=device-width or,
initial-scale=x where x >= 1
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHaAqYJN%3D47v4RATJTyeb8jDz%3DN%2B%2BXLC7YO-vLH5dkO9qBLLig%40mail.gmail.com.
If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?
If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?"Force enable zoom" preference is not used when deciding to disable DTZ. Even if "Force enable zoom" preference is set, DTZ will still be disabled when the meta viewport tag specifies a mobile optimized site.The behaviour is the same for Mobile Firefox when "Zoom on all websites" preference is set: DTZ is disabled.
On Fri, Feb 26, 2021 at 6:00 AM Christian Biesinger <cbies...@chromium.org> wrote:
If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?Christian
On Tue, Feb 23, 2021 at 12:23 AM Liviu Tinta <liviu...@chromium.org> wrote:
Contact emails
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Thanks for all the clarifications, Liviu; LGTM1
On Friday, February 26, 2021 at 12:06:19 PM UTC-8 Liviu Tinta wrote:
If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?"Force enable zoom" preference is not used when deciding to disable DTZ. Even if "Force enable zoom" preference is set, DTZ will still be disabled when the meta viewport tag specifies a mobile optimized site.The behaviour is the same for Mobile Firefox when "Zoom on all websites" preference is set: DTZ is disabled.
On Fri, Feb 26, 2021 at 6:00 AM Christian Biesinger <cbies...@chromium.org> wrote:
If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?Christian
On Tue, Feb 23, 2021 at 12:23 AM Liviu Tinta <liviu...@chromium.org> wrote:
Contact emails
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHaAqYJN%3D47v4RATJTyeb8jDz%3DN%2B%2BXLC7YO-vLH5dkO9qBLLig%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/54cbf324-0875-4c52-bd00-1915d4fffb3an%40chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9vHMsEKEyYNGz7QSRVbEygdwX2QwYoF5ckrLu6LuTRWg%40mail.gmail.com.