Page MenuHomePhabricator

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

Description

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.

Event Timeline

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

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

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

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