Intent to Ship: Disable Double Tap to Zoom when mobile viewport is set

[Liviu Tinta]

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

crbug.com/1108987

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:

1. zooming is disallowed (min-zoom equal to max-zoom) or 

2. 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:

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

<meta name="viewport" content="initial-scale=1.0">

To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:

1. zooming is disallowed, or

2. the content width is smaller than the viewport width, or

3. 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

[Domenic Denicola]

This looks like a great change!

From: Liviu Tinta <liviu...@chromium.org>

> Interoperability and Compatibility

> Edge: Expected to follow Chrome behavior.

Note that Edge mobile is stuck at Chromium M77 and has been for a long time, so this might not hold in practice.

[Yoav Weiss]

For some reason I thought we shipped this years ago... and a short search landed me with this.

(+Jake Archibald as his face is on that article..)

Is this change different from what we shipped back then? Is this fixing a regression?

--
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.

[Liviu Tinta]

Is this change different from what we shipped back then? Is this fixing a regression? 

I've tested https://output.jsbin.com/fodilah/quiet and https://output.jsbin.com/duxofug/quiet on Chrome 50.0.2645.0 and DTZ was enabled.

AFAICT it is not a regression. 

This fix (C) is different from A and B in that it specifically looks at initial-scale=1 and width=device-width in the meta viewport tag to disable DTZ.

[Jake Archibald]

On Monday, 22 February 2021 at 23:23:32 UTC liviu...@chromium.org wrote:

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

crbug.com/1108987

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:

1. zooming is disallowed (min-zoom equal to max-zoom) or 

2. the content width fits the viewport width.

I think folks might misinterpret "DTZ is currently enabled if it is possible to zoom at all" (it's probably what misled Yoav).

It's more like:

Currently, DTZ is enabled, unless:

• 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:

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

<meta name="viewport" content="initial-scale=1.0">

To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:

1. zooming is disallowed, or

2. the content width is smaller than the viewport width, or

3. 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?

[Liviu Tinta]

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.html

With 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).

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?

Once the code lands we plan to run a Finch experiment to determine what is the impact in terms of:

- how many times we disable DTZ with A,B,C compared to just A and B

- what is the effect on First Input Delay 

The justification in disabling DTZ for more pages is an improvement in user experience (faster clicks) and an improvement in First Input Delay.

In terms of the meta viewport tag:

- condition A targets minimum-scale=x, maximum-scale=x where the min and max scale are the same so there is no zooming allowed 

- condition C targets width=device-width and initial-scale=1.0 

My understanding is the recommendation to developers for controlling layout on mobile browsers is to use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This fix (C) would disable DTZ in this general scenario while allowing pinch-zoom.

[Jake Archibald]

It still isn't 100% clear to me. The OP suggests that (once https://bugs.chromium.org/p/chromium/issues/detail?id=1108987 lands) DTZ will be disabled if the viewport meta is:

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

Or

<meta name="viewport" content="initial-scale=1.0">

But it seems like you're saying that:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

…is ok too.

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">

[Robert Flack]

On Wed, Feb 24, 2021 at 10:01 AM Liviu Tinta <liviu...@chromium.org> wrote:

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.html

With 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).

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.

--

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.

[Robert Flack]

Sorry for the confusion around this. The higher level intention is to disable DTZ when we have any condition which implies that the page is designed to be usable without needing to zoom in.

I think you are right that we should be including minimum-zoom=1, that basically implies initial-scale is at least 1. The original post probably should have explicitly said if either width=device-width or initial-scale=1 is present in the tag.

--

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.

[Liviu Tinta]

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">

The proposed fix would disable DTZ in all the three cases you described. We look for width=device-width or initial-scale=1.0.

If initial-scale is specifically set to something different than 1, we do not disable DTZ.

E.g. we do not disable DTZ in this case:

<meta name="viewport" content="initial-scale=0.5, width=device-width">

or in this case:

<meta name="viewport" content="initial-scale=2, width=device-width">

[Jake Archibald]

👍 that sounds great. Completely agree with the changes here.

[Liviu Tinta]

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 ?

Right now this case is not covered by either A or C.

[Robert Flack]

On Wed, Feb 24, 2021 at 1:44 PM Liviu Tinta <liviu...@chromium.org> wrote:

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.

[Liviu Tinta]

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.

Would this be better?

To be precise, in our new implementation, DTZ will be disabled when any of the following conditions are met:

1. zooming is disallowed, or

2. the content width is smaller than the viewport width, or

1. the viewport tag specifies width=device-width or,

2. initial-scale=x where x >= 1

Case D will cover computed initial-scale (e.g. when minimum-scale >= 1) as well as explicitly specified initial-scale.

The other approach could be not to worry about initial-scale at all (leave D out). 

WDYT ?

[Alex Russell]

Just to clarify: this will align us with mobile FF's behavior, but will leave us somewhat out of step with Safari? I'm inclined to be happy with this change if Jake is, but would love to see this thread updated with links to docs on compat once we ship.

[Christian Biesinger]

If the "Force enable zoom" preference is set, will DTZ continue to work on such pages?

Christian

--
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.

[Liviu Tinta]

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.

 

[Alex Russell]

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

fla...@chromium.org, liviutinta...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Chris Harrelson]

LGTM2

On Thu, Mar 4, 2021 at 1:18 PM Alex Russell <sligh...@chromium.org> wrote:

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

fla...@chromium.org, liviu...@chromium.org

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.

[Yoav Weiss]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw9vHMsEKEyYNGz7QSRVbEygdwX2QwYoF5ckrLu6LuTRWg%40mail.gmail.com.