Page MenuHomePhabricator

Zoom and scroll gestures unusable on mobile browsers
Closed, ResolvedPublic

Description

Author: zackw

Description:
On smartphones and other devices with small screens, it's essential to be able to zoom into and scroll around images in order to see details. For instance, Wikipedia has many maps whose legend and embedded labels are illegible on a typical smartphone if zoomed all the way out. "Mobile" browsers universally support gestures for zooming and scrolling (usually one-finger touch and swipe to scroll, two-finger "pinch" / "stretch" to zoom).

If you try to use these gestures on a mobile browser displaying an image in the MultimediaViewer, they do not work correctly. I've seen three different, equally incorrect behaviors:

  • On an iPhone, the zoom gesture did nothing at all (and it was therefore impossible to test the scroll gestures).
  • On Android (4.2) stock browser, zooming enlarges the image but also enlarges the white bar at the bottom of the screen (in general, "chrome" like this should be exempted from zooming) and the image is also displaced downward (the image should not *move*, it should just *expand* under the user's fingers). Worse, after zooming in, scrolling gestures had no effect (so it was impossible to see anything but the top left hand corner of the image).
  • Firefox for Android behaves the same as the Android stock browser, except that the white bar at the bottom of the screen *migrates away from the bottom of the screen* as well as enlarging.

On a Commons image-description page, by contrast, this works fine; the gestures apply to the entire page, and the image is embedded in the page normally, so the image is zoomable and scrollable.

I personally consider this a bug of sufficient severity to warrant disabling the extension on all Wikipedias until it is fixed. There are a *lot* of mobile users, and their numbers are growing.


Version: unspecified
Severity: critical
Platform: Smartphone

Details

Reference
bz69414

Event Timeline

bzimport raised the priority of this task from to Needs Triage.
bzimport set Reference to bz69414.
bzimport added a subscriber: Unknown Object (MLST).
bzimport created this task.Aug 11 2014, 9:26 PM

sumanah wrote:

Zack, can you provide the URL(s) of the page(s) where you saw this behavior? Basically to check whether it was an m.* URL or a "regular" (desktop experience) Wikimedia site URL.

zackw wrote:

I did all the above testing with m.* URLs:

http://en.m.wikipedia.org/wiki/Orthodox_cross#/image/File:ChurchMilitant_(detail_01).jpg
http://en.m.wikipedia.org/wiki/Missouri_Compromise#/image/File:USA_Territorial_Growth_1820_alt.jpg

If I put an en.wikipedia.org URL into my (not-logged-in) Firefox for Android's address bar, it redirects me to en.m.wikipedia.org.

Also, important correction: I misremembered what happens on iPhones. The behavior there is basically the same as on Android. I'll attach some screenshots.

zackw wrote:

screen shot, iPhone, zoomed out

Attached:

zackw wrote:

screen shot, iPhone, zoomed in

Attached:

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/0G0ltl9I

sumanah wrote:

Thank you, Zack! By the way, you can stop by #wikimedia-mobile on Freenode IRC if you want to talk about this bug in realtime.

brion added a comment.Aug 11 2014, 9:52 PM

Ok, this is actually part of the MobileFrontend extension, and is implemented separately from the desktop MultimediaViewer. The bug's been moved to the right component so it'll go on the board for the right folks.

On my iPhone 5s (iOS 7.1.2) pinch-zoom appears to work fine with one exception: the detail/caption panel may flow over the image, especially in the case of a long caption such as http://en.m.wikipedia.org/wiki/Missouri_Compromise#/image/File:USA_Territorial_Growth_1820_alt.jpg

It may be possible to do something simple such as hiding the caption/detail overlay when zoomed in.

zackw wrote:

screen shot, Android, zoomed out

Attached:

zackw wrote:

screen shot, Android, zoomed in

N.B. All four screen shots are of https://en.m.wikipedia.org/wiki/Missouri_Compromise#/image/File:USA_Territorial_Growth_1820_alt.jpg

Attached:

zackw wrote:

(In reply to Brion Vibber from comment #7)

Ok, this is actually part of the MobileFrontend extension, and is
implemented separately from the desktop MultimediaViewer. The bug's been
moved to the right component so it'll go on the board for the right folks.

Oh, okay. (I may be a little hypersensitized to MultimediaViewer issues right now, for obvious reasons.)

On my iPhone 5s (iOS 7.1.2) pinch-zoom appears to work fine with one
exception: the detail/caption panel may flow over the image, especially in
the case of a long caption such as
http://en.m.wikipedia.org/wiki/Missouri_Compromise#/image/File:
USA_Territorial_Growth_1820_alt.jpg

I tested on 4s with 7.1.1. The detail/caption panel flowing over the image is definitely the most obvious part of the problem, but I also observe that scrolling gestures don't work correctly. Try zooming in just a little, so that the caption overlaps the image only partially, but the image is definitely wider than the screen, and then attempting to scroll horizontally.

gerritadmin wrote:

Change 153543 had a related patch set uploaded by Brion VIBBER:
Work in progress: allow pinch-zoom on image viewer overlay

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

Linked patch on master seems to resolve it in iOS simulator for me; my hotel wifi is pretty wacky and not amenable to much further testing here. :) Haven't tested Android yet, and there may be scenarios where the switch from position:fixed to position:absolute is a problem.

gerritadmin wrote:

Change 156482 had a related patch set uploaded by JGonera:
Fix media viewer styling to accommodate for zooming

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

jgonera wrote:

*** Bug 70150 has been marked as a duplicate of this bug. ***

gerritadmin wrote:

Change 156481 had a related patch set uploaded by JGonera:
Reenable zooming in overlays on iOS (except for VE)

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

gerritadmin wrote:

Change 156481 abandoned by Jdlrobson:
Reenable zooming in overlays on iOS (except for VE)

Reason:
https://gerrit.wikimedia.org/r/160855 is much simpler.

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

gerritadmin wrote:

Change 156482 abandoned by Jdlrobson:
Fix media viewer styling to accommodate for zooming

Reason:
https://gerrit.wikimedia.org/r/160855

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

gerritadmin wrote:

Change 153543 abandoned by Jdlrobson:
Work in progress: allow pinch-zoom on image viewer overlay

Reason:
Thanks Brion but https://gerrit.wikimedia.org/r/160855 got merged so it seems this is all fixed now! :)

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