Page MenuHomePhabricator

Recent changes "Save current filter settings" input zooms when focused on iOS
Closed, ResolvedPublic2 Estimated Story Points

Description

In IOS when clicking the bookmark icon for saving filters the screen zooms giving a bad user experience.

QA steps

Expected: I input text.
Actual: to save a filter the screen zooms in. Once you press close the screen remains zoomed in.

IMG_2984.PNG (1×750 px, 132 KB)
IMG_2985.PNG (1×750 px, 117 KB)

This doesn't impact Android and appears to be an issue inside OOUI. I remember similar issues encounted by @kostajh and @matmarex

Developer notes

According to @matmarex a font-size change should do it!

QA Results

ACStatusDetails
1T231049#5479979

Event Timeline

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

The computed font-size on that input is 14px. It must be at least 16px for iOS to not zoom in.

We had problems in VE where iOS zoomed in even though the font-size was 16px when focusing a content-editable element, but I don't think this is the case here.

This is not an OOUI bug. The reduced font size is set on .rcfilters-container and on .mw-rcfilters-ui-overlay.

matmarex renamed this task from oo-ui-textInputWidget zooms when focused on iOS to Recent changes "Save current filter settings" input zooms when focused on iOS.Aug 22 2019, 11:02 PM
kostajh moved this task from Inbox to External on the Growth-Team board.

@Jdlrobson @ovasileva sounds like Readers web plans to work on this so I'm marking as external, but let us know if that's not the case.

Jdlrobson renamed this task from Recent changes "Save current filter settings" input zooms when focused on iOS to [Needs estimate/discussion] Recent changes "Save current filter settings" input zooms when focused on iOS.Aug 23 2019, 4:11 PM
ovasileva set the point value for this task to 2.Aug 27 2019, 4:40 PM

Setting this as a small for now, if the quick fix approach doesn't work, we should flag that and discuss next steps

ovasileva subscribed.
Jdlrobson renamed this task from [Needs estimate/discussion] Recent changes "Save current filter settings" input zooms when focused on iOS to Recent changes "Save current filter settings" input zooms when focused on iOS.Aug 27 2019, 9:38 PM

Change 533361 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/core@master] Fix iOS input text zoom bug on rcfilters input

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

I made a quick attempt at this (the suggested quickfix) although I can't reproduce the problem on my iPhone iOS 12

Change 533361 abandoned by Nray:
Fix iOS input text zoom bug on rcfilters input

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

Moving this back to to needs analysis as the quick fix I tried in core was controversial. We can try to quickfix in either MF or Minerva, but I'm not sure where to put it? Since it is mobile specific, I would guess MF but is there a good place in MF for this rn without creating another module? @Jdlrobson

The patch wasn't controversial. I think James was trying to say is that it didn't belong in core. Add a skinStyle for the mediawiki.rcfilters module in Minerva or even better add a rule

textarea: { font-size: 1em; }

to Minerva. Currently we default to 11px.

Change 533937 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] 🐛 Bug: Fix iOS input text zoom bug on rcfilters input

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

The patch wasn't controversial. I think James was trying to say is that it didn't belong in core. Add a skinStyle for the mediawiki.rcfilters module in Minerva or even better add a rule

textarea: { font-size: 1em; }

to Minerva. Currently we default to 11px.

Because the parent element of the text input has font-size: 0.875em, we unfortunately can't just set the text input to have font-size: 1em because it wouldn't change the computed font-size. I've made a patch at https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/533937/ that sets the text input's font-size to 16px, but this introduces new problems (users who change their browser font-size won't notice a change with that element). Anyways, I'm not sure if that patch is an actual improvement because of this but I think it will fix this bug.

Edit: I changed the patch to just use rem units. For browsers that don't support this, it should just fallback to the inherited font size

Change 533937 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] 🐛 Bug: Fix iOS input text zoom bug on rcfilters input

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

@alexhollender I'm not sure if you'd be interested in reviewing this or not, but if you are, you can see the changes on https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges?hidebots=1&hidecategorization=1&limit=50&days=7&enhanced=1&damaging__likelygood_color=c2&urlversion=2

The font-size of the text input box (the one with "Describe the purpose of the filter" placeholder text) was adjusted a little so that the zooming wouldn't happen

Edtadros subscribed.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhone6

Test Artifact(s):

QA steps

Use an iOS Safari (replicated on Safari on iPhone 6S
Log in to the beta cluster
Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges?hidebots=1&hidecategorization=1&limit=50&days=7&enhanced=1&damaging__likelygood_color=c2&urlversion=2 on
tap the bookmark icon

✅ AC1: The "Save current filter settings" popup appears and can be dismissed without zooming.

T231049.gif (662×372 px, 193 KB)