Page MenuHomePhabricator

Recent changes "Save current filter settings" input zooms when focused on iOS
Closed, ResolvedPublic2 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.

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 project: Growth-Team. · View Herald TranscriptThu, Aug 22, 10:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
matmarex added a comment.EditedThu, Aug 22, 11:01 PM

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.Thu, Aug 22, 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 moved this task from Needs triage to Triaged on the Mobile board.Fri, Aug 23, 4:08 PM
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.Fri, Aug 23, 4:11 PM
ovasileva set the point value for this task to 2.Tue, Aug 27, 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 removed ovasileva as the assignee of this task.Tue, Aug 27, 4:57 PM
ovasileva added a subscriber: ovasileva.
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.Tue, Aug 27, 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

nray added a subscriber: nray.Fri, Aug 30, 12:23 AM

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

nray added a comment.Fri, Aug 30, 8:50 PM

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

Jdlrobson added a comment.EditedFri, Aug 30, 10:09 PM

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

nray added a comment.EditedMon, Sep 2, 4:46 PM

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

alexhollender assigned this task to nray.Wed, Sep 4, 5:23 PM

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 reassigned this task from Edtadros to ovasileva.Tue, Sep 10, 4:57 PM
Edtadros added a subscriber: Edtadros.

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.

Edtadros updated the task description. (Show Details)Tue, Sep 10, 4:58 PM
ovasileva closed this task as Resolved.Wed, Sep 11, 9:15 AM