Page MenuHomePhabricator

[BUG] Certain Articles can Scroll Left & Right
Open, Stalled, LowPublic

Description

Steps to reproduce

  1. Open "List of SEPTA Regional Rail stations" on en.wiki
  2. Attempt to scroll the content to the left

Expected results

the content doesn't scroll

Actual results

the content scrolls

Screenshots


^ this list of a-z links appears to be the culprit

Environments observed

App version: app store, current beta, develop branch

Related Objects

StatusAssignedTask
OpenNone
OpenNone
ResolvedNone
DuplicateNone
OpenNone
OpenNone
OpenNone
DuplicateNone
OpenNone
OpenNone
Resolved Jdlrobson
DuplicateNone
DuplicateNone
OpenNone
OpenNone
StalledNone
InvalidNone
OpenNone
OpenNone
ResolvedTheDJ
ResolvedTheDJ
InvalidNone
OpenNone
ResolvedTheDJ
OpenNone
Resolved Jdlrobson
Open Jdlrobson
Open Jdlrobson
ResolvedTgr
ResolvedAnomie
OpenNone
StalledMhurd

Event Timeline

JoeWalsh created this task.Jun 21 2016, 7:33 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 21 2016, 7:33 PM
JMinor triaged this task as Low priority.Jun 27 2016, 9:08 PM
JMinor added a subscriber: JMinor.

Unfortunately because we allow editors to put in some non-mobile friendly css, particularly with templates, this may be out of the app's scope to fix.

Where we can easily fix it, though, we should.

JMinor assigned this task to Mhurd.Apr 3 2017, 9:53 PM
Mhurd added a comment.EditedApr 4 2017, 12:38 AM

Looks like there are a couple of things going on here.

  • The wide horizontal "A B C D..." list is wider than the screen
  • For whatever reason this doesn't correctly (or isn't properly configured to) use "overflow: x"
  • But this appears to be an upstream issue - i.e. I see the same thing on mobile web:

  • However on the app the "A B C D..." list is even wider than on mobile web so the issue is even worse:

I looked into why the app CSS for these lists is different than mobile web and I think I know what's going on.

When we run "make css" we pull upstream css. However the CSS url we fetch from...

https://en.wikipedia.org/w/load.php?debug=false&lang=en&only=styles&skin=vector&modules=skins.minerva.base.reset|skins.minerva.content.styles|mobile.app.pagestyles.ios

...actually comes from the "MobileApp" extension.

The MobileApp extension gives us the upstream CSS, but also CSS from a few "mobile.app.pagestyles.ios" files.

The problem is, I think, mostly with the enwiki.less file. It has accrued some crufty CSS which produces a fairly large delta against the upstream CSS which could explain some of the more confusing issues we've ran into which don't always seem to effect mobile web. This line in "enwiki.less" is causing the "A B C D..." width issue noted above.


I think the iOS app should deprecate pulling CSS from the mobile app extension and instead directly pull mobile web CSS without this "enwiki.less" delta. It would do this at build time, or rather, when we run "make css", as it does now. Deprecating the mobile app extension would require us to audit what breaks without the "enwiki.less" delta (such as the edit button, which seemed to break when I tested this). We'd then have to add any truly necessary iOS workarounds to our "web/less/misc.less" file (which gets gruntified to "assets/stylesoverrides.css" when we run "make grunt").

I think there are a couple benefits to more directly ingesting mobile web's CSS (w/o MobileApp's "enwiki.less" delta):

  • fixes the difference between the app and mobile web in regards to the "A B C D..." width issue noted above
  • upstream CSS would be more likely to work as intended (upstream fixes over time likely didn't account for hacks which have accrued in "enwiki.less")
  • we'd be more encouraged to file upstream tickets
  • some parts of "enwiki.less" look they maybe should have been implemented upstream in the first place
JMinor changed the task status from Open to Stalled.Apr 20 2017, 6:57 PM