Page MenuHomePhabricator

It is possible to scroll below the fake viewport on iOS, causing visual glitches
Closed, ResolvedPublic

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.

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
  • scroll to the bottom of the page
  • try to continue scrolling further down — at this point one of several things seems to happen:
  • the page freezes and I can't scroll back up
  • the page header disappears
  • a gray border/line appears, and is fixed towards the bottom of the screen

Developer notes

Bartosz has a fix here: https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/489222/ which fixes out handlers for 'touchstart' and 'touchmove' events to not be passive (they are passive by default in recent browsers, which means preventDefault() doesn't work).

Event Timeline

Change 489222 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.startup/Overlay: Update iOS scroll hacks for iOS 11.3

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

ovasileva triaged this task as Medium priority.Feb 11 2019, 5:46 PM

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdlrobson.

Change 489222 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.startup/Overlay: Update iOS scroll hacks for iOS 11.3

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

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

This is a patch for another issue Jon split off of this: T215849: Clicking in textareas in iOS causes browser to zoom (e.g. in talk overlay)

matmarex claimed this task.