Page MenuHomePhabricator

Consider removing "maximum-scale" from "viewport" tag
Closed, ResolvedPublic

Assigned To
Authored By
brendanlong
Jan 12 2017, 9:10 PM
Referenced Files
F2352328: Screen Shot 2017-01-12 at 2.02.44 PM.png
Jan 12 2017, 10:11 PM
F2352331: Screen Shot 2017-01-12 at 2.02.56 PM.png
Jan 12 2017, 10:11 PM
F2352295: Screen Shot 2017-01-12 at 1.56.17 PM.png
Jan 12 2017, 9:58 PM
F2352297: Screen Shot 2017-01-12 at 1.56.34 PM.png
Jan 12 2017, 9:58 PM
F2352305: Screen Shot 2017-01-12 at 1.58.28 PM.png
Jan 12 2017, 9:58 PM
F2352249: WMATA-Metro-System-Map.png
Jan 12 2017, 9:51 PM
F2352129: Screen Shot 2017-01-12 at 1.17.22 PM.png
Jan 12 2017, 9:22 PM

Description

Each page in Phabricator has this viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

The problem is that maximum-scale prevents users from zooming, which is extremely annoying and an accessibility issue (especially if they contain images that are designed for desktop monitors). Preventing user zooming doesn't make sense on these pages, so can you remove it?

The relevant code is in src/view/page/PhabricatorBarePageView.php. Just removing the "maximum-scale" part should fix this.

Reproduction Steps:

  • Open this page on your phone
  • Try to use pinch to zoom.

Versions:

  • Whatever version this page is using (view source on this page -> search for "viewport")
  • master

Event Timeline

epriestley added a subscriber: epriestley.

As you might already have guessed, this isn't a bug.

If you're having difficulty with specific interactions on mobile devices, please file separate feature requests describing them in detail, and focusing on the root problems you're encountering (see Describing Root Problems).

I can not reproduce a general accessibility issue here. For example, all the text on this page is easily readable for me without zooming:

Screen Shot 2017-01-12 at 1.17.22 PM.png (1×752 px, 183 KB)

If you're facing an accessibility issue because you have abnormal vision, please describe the affordances you need in greater detail. In many cases, we are better able to address accessibility issues by tackling them in a narrow way (e.g., with the SettingsDisplay PreferencesAccessibility options) than by trying to find a one-size-fits-all solution.

I'm not asking you to implement a new accessibility feature, I'm asking you to stop *preventing* an accessibility feature from being used. Browsers already do this; you just need to stop telling them not to.

In this case a general solution is the right thing to do because:

  • There's no reason to disable this
  • Even if you have special fixes for the cases below, you're likely to miss other cases (and most users won't report bugs)
  • Even if you special-cased it, the correct special-case would be implementing pinch-to-zoom, since that's what phone users expect

For specific problems:

  • I was trying to click on a link in a list of links that are close together. Normally I would zoom in and then click, but zoom is disabled.
  • Try reading an image like this on a phone (even in the zoomed-in view):
    WMATA-Metro-System-Map.png (1×1 px, 740 KB)

Here are some screenshots of Phabricator with this tag removed, as you suggest:

Screen Shot 2017-01-12 at 1.56.17 PM.png (1×752 px, 138 KB)

Screen Shot 2017-01-12 at 1.56.34 PM.png (1×752 px, 157 KB)

Here, I've zoomed in enough to read part of the description of a task:

Screen Shot 2017-01-12 at 1.58.28 PM.png (1×752 px, 135 KB)

Do you think this is better than how the site currently works on devices?

Oh, sorry, you just wanted maximum-scale removed.

Yes, the rest of the tag is good. I just don't want pinch-to-zoom to be disabled.

epriestley renamed this task from Don't prevent zooming on phones to Consider removing "maximum-scale" from "viewport" tag.Jan 12 2017, 10:07 PM
epriestley reopened this task as Open.
epriestley triaged this task as Low priority.
epriestley edited projects, added Mobile; removed Accessibility, Bug Report.

There are at least some nontrivial effects, like searching for text without "maximum-scale" can imply a zoom:

Screen Shot 2017-01-12 at 2.02.44 PM.png (1×752 px, 126 KB)

With "maximum-scale":

Screen Shot 2017-01-12 at 2.02.56 PM.png (1×752 px, 128 KB)

That said, I couldn't immediately find anything egregiously broken. I think iOS is ignoring this attribute in some cases anyway:

https://medium.com/@johan_ronsse/re-apple-disabling-maximum-scale-behavior-on-responsive-websites-in-ios10-17bc7b0f27c0#.irjo0hakv

..although that post is from June 2016 and has a lot of words that I didn't read.

Concretely, I can zoom on my iPhone SE / iOS 10.2 regardless of the setting, and the text search case above behaves as though the attribute was not present.

Hopefully Android browsers will hurry up and ignore that tag too..

chad claimed this task.
chad added a subscriber: chad.

Removed.

(Specifically, D17714 added user-scalable=no, which probably does the opposite of what this requested.)

I tested pinch to zoom, which still works. We just turn off the auto-zoom. I'll roll the server here and give a more thorough shakedown.

Oh -- but double-tap-to-zoom doesn't? 😕

(I am glad to see the auto-zoom-on-controls gone and don't care about any other zoom feature.)

I am just intrigued that user-scalable=no actually means "somewhat user-scalable".

Rolling, so we'll see how accurate the simulator was.

ehhh, not sure about this. It's not worse, like I can pinch to zoom in Safari, but not Chrome.