Page MenuHomePhabricator

Some map images cause the entire webview to be scrollable left to right
Closed, ResolvedPublic

Description

Device
All

OS version
iOS 8.1 (but most likely all OSs)

Observed Behavior
The entire web page scrolls left to right.

Expected Behavior
Only the image itself should scroll left to right. The web page width should be fixed to the screen width.
See the Article "Goatfish" and go to the section "Timeline". Notice that the timeline scrolls independently of the webview.

Steps To Reproduce

  1. Launch App
  2. Tap Search
  3. Search for "Tel Aviv" and tap on the article.
  4. Scroll to the bottom and tap "other languages" and select "Hebrew"
  5. Swipe left/right, notice the whole page scrolls left to right.. Scroll Aproximately 60% of the way down. You will see the 2 charts that cause the web page to scroll left right.

Screenshot:

Screenshot_2015-03-05_16.51.48.png (1×974 px, 140 KB)

Event Timeline

Fjalapeno raised the priority of this task from to Needs Triage.
Fjalapeno updated the task description. (Show Details)
Fjalapeno subscribed.
Deskana triaged this task as Medium priority.Mar 9 2015, 9:41 PM
Deskana subscribed.

@KLans_WMF no this was not fixed, just discovered.

I put it in the backlog to be scheduled whenever. It is not a blocker (IMO) as https://phabricator.wikimedia.org/T90032 was.

All content in the page is readable and works - just not as intended (whole page scrolls side to side instead of just the image)

I'll also update the description to be more precise.

@Deskana if you agree this is not a release blocker, can we put this in the bug backlog (or next sprint, or at the bottom of this sprint backlog, wherevs you think is right) so we can keep the focus on getting the release out the door?

Mhurd moved this task from To Do to Doing on the Mobile App Sprint 52 - iOS board.
Mhurd updated the task description. (Show Details)

For me the horizontal scrolling only surfaces when I actually horizontal scroll the tables first. But no matter, I'm testing the fix.

The charts in 'Tel Aviv'(Hebrew) article do not require horizontal scroll.

The 'Goatfish' article - Timeline chart does not allow to scroll vertically, but the chart is cut off. There is no another way to see all information except switching to horizontal position. For users there is no way to know that there is more info on the chart until they view the chart horizontally.
Should be a separate bug?

KLans_WMF added a subscriber: Vibhabamba.

on to you for design signoff @Vibhabamba

In mobile web we force the image to go no bigger than the viewport.

max-width: 100% !important;
height: auto !important;

Is this not working for you?

Signed off by Design.
Tested this single instance only.

In mobile web we force the image to go no bigger than the viewport.

@Jdlrobson what selectors do you apply that rule to? i think our problem is that we need to apply the overflow property to the <img> parent, as setting the max-width alone might cause it to be clipped and not scrollable.

either way, I would like to explore ways to remove extra DOM restructuring if it can be avoided. but it can be done as a follow-on tech-debt thing since this patch has already been merged and passed QA.

Oh wait. We have the same issue on web. It's not wrapped in any div. This is a problem in whatever produces the timeline code and should be fixed at source so we can all benefit from this and not hacked around like this. I've setup T97182

Note this is a super edge case and not worth the hack you've introduced. I'd suggest killing that hack as it will cause you more harm than good.

I added notes to the T97182 task Jon created and added it to the iOS app tracking column.