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

237 views
Skip to first unread message

Liviu Tinta

unread,
Feb 22, 2021, 6:23:32 PMFeb 22
to blink-dev

Contact emails

fla...@chromium.orgliviu...@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

unread,
Feb 22, 2021, 6:29:57 PMFeb 22
to Liviu Tinta, blink-dev
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

unread,
Feb 23, 2021, 5:41:45 PMFeb 23
to Domenic Denicola, Jake Archibald, Liviu Tinta, blink-dev
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

unread,
Feb 23, 2021, 7:38:43 PMFeb 23
to Yoav Weiss, Domenic Denicola, Jake Archibald, blink-dev
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

unread,
Feb 24, 2021, 4:01:20 AMFeb 24
to blink-dev, liviu...@chromium.org
On Monday, 22 February 2021 at 23:23:32 UTC liviu...@chromium.org wrote:

Contact emails

fla...@chromium.orgliviu...@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

unread,
Feb 24, 2021, 10:01:38 AMFeb 24
to Jake Archibald, blink-dev
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

unread,
Feb 24, 2021, 10:18:52 AMFeb 24
to Liviu Tinta, blink-dev
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

unread,
Feb 24, 2021, 10:19:59 AMFeb 24
to Liviu Tinta, Jake Archibald, blink-dev
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.

Robert Flack

unread,
Feb 24, 2021, 10:23:10 AMFeb 24
to Jake Archibald, Liviu Tinta, blink-dev
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.

Liviu Tinta

unread,
Feb 24, 2021, 11:18:51 AMFeb 24
to Robert Flack, Jake Archibald, blink-dev
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

unread,
Feb 24, 2021, 11:21:52 AMFeb 24
to Robert Flack, Liviu Tinta, blink-dev
👍 that sounds great. Completely agree with the changes here.

Liviu Tinta

unread,
Feb 24, 2021, 1:44:51 PMFeb 24
to Jake Archibald, Robert Flack, blink-dev
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

unread,
Feb 24, 2021, 2:10:53 PMFeb 24
to Liviu Tinta, Jake Archibald, blink-dev
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

unread,
Feb 24, 2021, 4:13:27 PMFeb 24
to Robert Flack, Jake Archibald, blink-dev
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

unread,
Feb 25, 2021, 3:44:15 PMFeb 25
to blink-dev, Liviu Tinta, Jake Archibald, blink-dev, Robert Flack
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

unread,
Feb 26, 2021, 6:00:05 AMFeb 26
to Liviu Tinta, blink-dev
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.

Liviu Tinta

unread,
Feb 26, 2021, 3:06:19 PMFeb 26
to Christian Biesinger, blink-dev
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

unread,
Mar 4, 2021, 4:18:16 PMMar 4
to blink-dev, Liviu Tinta, blink-dev, Christian Biesinger
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:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Chris Harrelson

unread,
Mar 9, 2021, 7:37:37 PMMar 9
to Alex Russell, blink-dev, Liviu Tinta, Christian Biesinger
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:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

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

unread,
Mar 9, 2021, 11:30:53 PMMar 9
to Chris Harrelson, Alex Russell, blink-dev, Liviu Tinta, Christian Biesinger
Reply all
Reply to author
Forward
0 new messages