Last modified: 2014-09-25 16:48:42 UTC
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.
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.
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.
Created attachment 16167 [details] screen shot, iPhone, zoomed out
Created attachment 16168 [details] screen shot, iPhone, zoomed in
Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/0G0ltl9I
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.
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.
Created attachment 16169 [details] screen shot, Android, zoomed out
Created attachment 16170 [details] 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
(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.
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.
Change 156482 had a related patch set uploaded by JGonera: Fix media viewer styling to accommodate for zooming https://gerrit.wikimedia.org/r/156482
*** Bug 70150 has been marked as a duplicate of this bug. ***
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
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
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
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
Should be fixed by https://gerrit.wikimedia.org/r/160855
