Clicking in textareas in iOS causes browser to zoom (e.g. in talk overlay)
Closed, ResolvedPublic
Actions

Description

In T212967#4882458, @alexhollender wrote:

Here is a video of the bugs I was experiencing on iOS yesterday: https://drive.google.com/file/d/1MGmryRAoUdnRucfDBJT0KjyXpjbioLTA/view?usp=sharing. The same issues don't seem to occur on Android.

this task concerns the zooming behaviour when the textarea is clicked for add reply.

QA steps

To reproduce:

Make sure you have an iOS device. iPhone XS Safari. (browserstack will do!)
Visit http://reading-web-staging.wmflabs.org/wiki/Prime_Minister_of_Australia
Make sure you are logged in
scroll to bottom of page, click talk button to open the Talk overlay
open a discussion
tap into the text field towards the bottom of the page
type something
tap "Done" to dismiss the keyboard
zoom out

Developer notes

The problem here seems to be related to font-size of text areas and is documented here https://blog.osmosys.asia/2017/01/05/prevent-ios-from-zooming-in-on-input-fields/

Basically all textareas should have font-size 16px at minimum to avoid zooming on iOS.

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/extensions/MobileFrontend	master	+3 -0	Set textarea font size to 16px to avoid iOS zooming problems.

Customize query in gerrit

Related Objects

Mentioned In: T215619: It is possible to scroll below the fake viewport on iOS, causing visual glitches
Mentioned Here: T212967: Help panel: textarea not visible when editing in VE mode on mobile

Event Timeline

Jdlrobson created this task.Feb 12 2019, 12:01 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 12 2019, 12:01 AM

Jdlrobson renamed this task from Clicking in textarea in talk page auto-zooms to Clicking in textareas in iOS causes browser to zoom (e.g. in talk overlay).Feb 12 2019, 12:01 AM

Change 489916 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Set textarea font size to 16px to avoid iOS zooming problems.

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

gerritbot added a project: Patch-For-Review.Feb 12 2019, 12:02 AM

ovasileva triaged this task as Medium priority.Feb 12 2019, 3:32 PM

matmarex mentioned this in T215619: It is possible to scroll below the fake viewport on iOS, causing visual glitches.Feb 13 2019, 9:50 AM

Change 489916 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Set textarea font size to 16px to avoid iOS zooming problems.

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

ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.18; 2019-02-19).Feb 13 2019, 3:00 PM

matmarex closed this task as Resolved.Feb 13 2019, 3:35 PM

matmarex assigned this task to Jdlrobson.