Certain pages are incorrectly scrollable horizontally in the app, due to a piece of content further down the page that is too wide to fit in the viewport. We should try to handle as many of these cases as possible.
Example pages:
[[Lagrangian point]]
[[Geology]]
[[Plasma (physics)]] <- broken on mobile web, too
Note: the [[Plasma (physics)]] article had a table that had an explicit min-width hard-coded in the actual wikitext. I've edited the page to remove the min-width, and it now appears correctly.
Change 266910 had a related patch set uploaded (by Dbrant):
Restore CSS class for overflowing wide images.
Change 266912 had a related patch set uploaded (by Dbrant):
Restore CSS class for overflowing wide images.
What is this blocked on or tracking, exactly?
[[Geology]] scrolls horizontally quite a bit these days, if it was ever fixed. [[Plasma (physics)]] looks fine.
I've fixed [[Lagrangian point]] by editing the page manually, but MobileFrontend should probably be made aware of this, too:
It looks like a <math> tag overflows correctly only if it begins with a colon. For example, this will have the proper overflow behavior:
: <math>\frac{M_1}{(R-r)^2}+\frac{M_2}{(2R-r)^2}=\left(\frac{M_2}{M_1+M_2}R+R-r\right)\frac{M_1+M_2}{R^3}</math>
...however, this will not:
<math>\frac{M_1}{(R-r)^2}+\frac{M_2}{(2R-r)^2}=\left(\frac{M_2}{M_1+M_2}R+R-r\right)\frac{M_1+M_2}{R^3}</math>
I suppose this makes sense, since the <math> tag can also be used for inline inclusion along with other text, and it's only with the use of a colon that the equation gets wrapped in a <dd> element which allows it to overflow. But I wonder how many other math equations need to be updated in this way.
...And regarding [[Geology]], it looks like the scrolling is due to a div that has a class of timeline-wrapper, which is a class that we don't seem to have at all.
This class seems to be coming from the module ext.timeline.styles, which we might do well to include in our CSS bundle.
Change 357391 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Include CSS styles from Timeline extension.
Change 357391 merged by jenkins-bot:
[apps/android/wikipedia@master] Include CSS styles from Timeline extension.
Glad to have this one out of the way. I think the goal of this task isn't really to "prevent horizontal scrolling", but to become one-to-one with Mobile Web in terms of CSS, so that when we do find a page that scrolls horizontally, we can confidently file a ticket upstream, then pull down any CSS updates that they make. And I think we're pretty much there!
@Mhurd Could you make sure you're including the module ext.timeline.styles in your CSS, too? (assuming you're not already)
Tested on Samsung-SM-JI20A Galaxy Express 3 (Android 6.0.1) and Wikipedia app 2.6.198-alpha-2017-06-12. This is fixed as I was able to scroll horizontally through the [[Lagrangian point]], [[Geology]] and [[Plasma (physics)]] pages using my device.
Tested on Nexus 4 with Android 5.1 and Pixel with Android 7.1 on 2.6.198-beta-2017-06-09
Looks good. Tested with Langrangian Point and Tangent articles.