Page MenuHomePhabricator

[M] MediaSearch: clicking the More Details link on mobile Safari pulls up browser toolbar
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Open Safari on an iPhone that's not big enough to show the entire "More details" page on a single page (e.g. a regular iPhone 11).
  • Go to Commons, search for anything.
  • Click on any result to open quick view.
  • Scroll down to see the "More details" button, which should now be at the bottom of the screen.
  • Tap the "More details" button.

What happens?:
The Safari navigation toolbar shows up at the bottom of the screen and the "More details" button is impossible to click (because there's not enough scrolling needed to remove the toolbar again without closing quick view and scrolling the search results).

What should have happened instead?:
A new tab with the details page for the given image should open.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:
iPhone 11Pro, iOS 14.6, Safari 14

Testing Script for iOS Safari

  1. Test on a real iOS device (old/small iPhone is best) or using the iOS simulator. Or both.
  2. Navigate to Special:MediaSearch and search for "desert" (the first image is tall and narrow and will be a good test)
  3. Once the results load, do not scroll – click on the first image result while Mobile Safari's bottom tool bar is still visible.
    • Scroll down to the bottom of the quickview dialog; the bottom button should be fully visible
  4. Close the dialog and scroll down to the subsequent results. Mobile Safari's bottom toolbar should disappear. Now click on a subsequent result.
    • Quickview panel should fill the screen, including the area previously taken up by the bottom toolbar. No "gaps" at the bottom should be visible
  5. Test on other browsers and devices to ensure there are no regressions – for example, use desktop Firefox, toggle the mobile skin, and test with a very tall and narrow viewport.
    • In all possible browser/device/screen size combinations, the bottom button should always be reachable and there should never be a gap at the bottom of the dialog.

Event Timeline

CBogen renamed this task from MediaSearch: clicking the More Details link on mobile Safari pulls up browser toolbar to [M] MediaSearch: clicking the More Details link on mobile Safari pulls up browser toolbar.Jun 22 2021, 4:56 PM

FIX:

sd-dialog {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}

Change 704155 had a related patch set uploaded (by Seddon; author: Seddon):

[mediawiki/extensions/MediaSearch@master] T285234 MediaSearch: clicking the More Details link on mobile Safari pulls up browser toolbar

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

Patch tested locally in Xtools simulator.

There is a great blog post about this problem from several years ago: https://www.eventbrite.com/engineering/mobile-safari-why/

@Seddon can you reproduce the error in the iOS simulator when your patch is not applied? I'm having trouble repro-ing locally using the simulator, and I fear that for these kinds of viewport/scrolling bugs the simulator may not be 100% identical to real on-device behavior. Trying to figure out the best way review on a real device, I wish we had an easy way to stage these patches...

Noting here that replication seems to be inconsistent. Eric will look into code reviewing this in the coming days.

I think the problem here was that we were trying to rely on 100vh in Mobile Safari, which is just not consistent due to the behavior of the top & bottom browser toolbars (sometimes they are there, sometimes not, sometimes "100vh" gets calculated in one state and then we're stuck with an erroneous value when the toolbar visibility changes). I've updated the patch to rely on 100% and -webkit-fill-available instead. This works on all the browsers I've tested but I think more testing should be done just in case.

Here's a testing script – @Seddon if you can, try to test this in your local development environment. Assuming it looks okay to you and we merge, @Etonkovidova could follow the same steps to test on Beta when this goes out.

Testing Script for iOS Safari dialog bug

  1. Test on a real iOS device (old/small iPhone is best) or using the iOS simulator. Or both.
  2. Navigate to Special:MediaSearch and search for "desert"
  3. Once the results load, do not scroll – click on the first image result while Mobile Safari's bottom tool bar is still visible.
    • Scroll down to the bottom of the quickview dialog; the bottom button should be fully visible
  4. Close the dialog and scroll down to the subsequent results. Mobile Safari's bottom toolbar should disappear. Now click on a subsequent result.
    • Quickview panel should fill the screen, including the area previously taken up by the bottom toolbar. No "gaps" at the bottom should be visible
  5. Test on other browsers and devices to ensure there are no regressions – for example, use desktop Firefox, toggle the mobile skin, and test with a very tall and narrow viewport.
    • In all possible browser/device/screen size combinations, the bottom button should always be reachable and there should never be a gap at the bottom of the dialog.

One last note: MobileSafari seems to aggressively cache pages and there is not an obvious way to turn this behavior off. The best workaround I could find was to use "Private Browsing" and open a new tab (closing the previous one) every time I made a code change and wanted to ensure I was seeing the up-to-date behavior. This is only necessary if you need to make additional changes during local development of course.

Yep all looks good to me.

Confirmed with the above testing script. +2

Checked on commons wmf.15 - looks good.