Page MenuHomePhabricator

Page zooms slightly when focusing document on iPhone Chrome
Closed, ResolvedPublic

Description

On my iPod touch test device (iPhone 5 size), focusing the document zooms the page in by about 5%, also zooming in on the toolbar and making the padding unbalanced.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

This does not happen for me using iPhone SE, which should be the same screen size. (In this recording, I zoom in with pinch-zoom.)

However, it does happen when putting the cursor in an image caption, which has a smaller font size. iOS Safari will zoom in when the font size is smaller than 16px.

JTannerWMF subscribed.

@Esanders will add a video of it happening

The slight zoom actually only happens on Chrome+iOS, not Safari. However the caption issue is on both browsers.

matmarex renamed this task from Page zooms slightly when focusing document on iPhone to Page zooms slightly when focusing document on iPhone Chrome.Mar 19 2019, 2:17 PM

The only way to fix the caption issue would be to make the font size larger, either on load or on focus. Both of these approaches have downsides:

  • On load: Inconsistency with read mode
  • On focus: potential loss of focus/scroll offset as text moves (also may not actually work?)

We have to decide if the zoom issue is bad enough that we want to sacrifice the font size consistency with read mode.

Actually, it seems there is a way: https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/46254706#46254706

daxmacrog

You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

I tested this quickly and it seems to work.

According to other comments, this will however disable user zoom in Chrome on iOS (and on Android devices, but we can limit this to iOS). This might be okay?

Change 512748 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] MobileArticleTarget: Prevent page zooming on focus on iOS

https://gerrit.wikimedia.org/r/512748

this will however disable user zoom in Chrome on iOS

Disabling zoom is an accessibility issue, but it might be better than hiding the toolbar.

Given Peter's video of the issue on an iPhone XS + Safari (https://www.youtube.com/watch?v=t6CT0lTgOAI) I think this is a pretty serious issue on iOS+Safari, and so we should proceed with Bartosz's patch, despite the issue on iOS+Chrome.

The zoom controls can be changed dynamically, so if that's a problem, we could try doing something cheeky like re-enabling zoom after the cursor is placed, or maybe even keep it always enabled except when the user is placing the cursor to prevent this unintended zoom… We'd need to test that carefully to make sure nothing blows up, but depending on how the browser handles it, we may be able to do it.

@matmarex, does the table below accurately describe the behavior being proposed in both patches?

ConfigurationT216446#5218826 [1]/r/512748
iOS + Safariunintended zoom [2] = non-issue; pinch-to-zoom = enabledunintended zoom = non-issue; user zoom = enabled
iOS + Chromeunintended zoom = enabled; user zoom = disabled⚠️ unintended zoom = disabled; user zoom = disabled
iOS + Firefoxunintended zoom = disabled; user zoom = enabledunintended zoom = disabled; user zoom = enabled
Android + all browsersunintended zoom = disabled; user zoom = enabledunintended zoom = non-issue; user zoom = enabled

If it does, before moving forward with what's being proposed in T216446#5218826, I'm keen to hear what Volker thinks about the accessibility tradeoff here...

@Volker_E, what do you think about releasing a patch that would disable contributors using iOS + Chrome from zooming the editing surface?

This question comes in response to the following issue...

Issue: the page zooms slightly when focusing the document in edit mode, using iPhone + Chrome and Safari (see: video)

cc @Esanders


  1. T216446#5218826: assumes the patch (not yet written) works as expected
  2. "unintended zoom" = auto-zoom when contributors place the cursor in the document in edit mode

That seems right; although I can't test it exactly, as my iOS device is an iPhone SE, which for some reason doesn't seem to suffer from this problem.

From a quick glance, if maximum-scale=1 is the only way to circumvent the described unintended behaviour:

  • how big is the percentage of iOS + Chrome?
  • definitely limit it to iOS

@matmarex has laid it out very well and already limited to iOS. Disabling zoom is one of the worst possible limitations for users. Nonetheless I'd, when the numbers are clear (and small) for Chrome/iOS, still consider the outlined solution, file a bug against Chrome (which seems to try being smarter than the standard) and revisit the solution after a while.

The zoom controls can be changed dynamically, so if that's a problem, we could try doing something cheeky like re-enabling zoom after the cursor is placed, or maybe even keep it always enabled except when the user is placing the cursor to prevent this unintended zoom… We'd need to test that carefully to make sure nothing blows up, but depending on how the browser handles it, we may be able to do it.

This indeed seems to be possible, and I now updated the patch so that it prevents the undesired automatic zooming while still allowing pinch-zooming in iOS Chrome.

If anyone wants to test the hack outside of VE, here's a simplified version I was initially testing with.

Change 512748 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] MobileArticleTarget: Prevent unwanted page zooming on focus on iOS

https://gerrit.wikimedia.org/r/512748

If anyone wants to test the hack outside of VE, here's a simplified version I was initially testing with.

This is neat. Nice work on this, @matmarex.