Page MenuHomePhabricator

[BUG] Graphs wider than screen force larger viewport on smaller screens impacting apps/mobile web
Closed, DuplicatePublic

Description

Steps to reproduce

  1. Search "Liste de sondages sur l'élection présidentielle française de 2017" in french wiki
  2. Open the article

Expected results

I expect the content to use all the horizontal space available. I did not have this bug on this article on the previous app version and a couple days before neither in the 5.4.0 I think...

Actual results

The content is displayed only on the left part of the screen. There is wider graphs below in the article, but the content is still scrollable to see the right parts of the graphs. The right part of the screen is used to display an "empty" graph that hasn't to be here.

Screenshots


Before scrolling to right
After scrolling to right

Environments observed

App version: 5.4.0
OS versions: 10.2.1
Device model: iPhone 6
Device language: French


Edit by Monte:
Confirmed on phone that mobile web has same issue for those sections on https://fr.m.wikipedia.org/wiki/Liste_de_sondages_sur_l%27élection_présidentielle_française_de_2017

(Tap image for animation)

Event Timeline

julbod created this task.Mar 25 2017, 3:09 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 25 2017, 3:09 PM
julbod updated the task description. (Show Details)Mar 25 2017, 3:10 PM
Mhurd added a subscriber: Mhurd.Mar 25 2017, 6:52 PM

Good catch. I created 2 upstream tickets last week for this issue. I'll link those and double check that it's the same issue when I get back to my laptop later today.

Mhurd added a comment.Mar 25 2017, 6:57 PM

Confirmed on phone that mobile web has same issue for those sections on https://fr.m.wikipedia.org/wiki/Liste_de_sondages_sur_l%27élection_présidentielle_française_de_2017

So yeah I'll update the upstream tickets and this one when I'm back on laptop.

Again, good catch!

julbod updated the task description. (Show Details)Mar 25 2017, 7:10 PM
Mhurd updated the task description. (Show Details)Mar 28 2017, 10:40 PM
Jdlrobson added a subscriber: Jdlrobson.

Looks like the Graphs extension generates images bigger than the viewport (mw-graph)
In interim, in lieu of a fix apps could hide these classes...

.mw-graph { display: none; }
Jdlrobson renamed this task from [BUG] Article is displayed only on the left part of the screen to [BUG] Graphs larger than force larger viewport on smaller screens impacting apps/mobile web.Mar 29 2017, 9:45 PM
Jdlrobson moved this task from Incoming to 2014-15 Q4 on the Readers-Web-Backlog board.
JMinor triaged this task as Low priority.Apr 4 2017, 3:54 PM
JMinor moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.
TheDJ added a subscriber: TheDJ.May 17 2017, 11:28 AM

or quickly add the noresize class to the graph extension...

Mhurd renamed this task from [BUG] Graphs larger than force larger viewport on smaller screens impacting apps/mobile web to [BUG] Graphs wider than screen force larger viewport on smaller screens impacting apps/mobile web.Jun 5 2017, 11:12 PM
Mhurd added a comment.Jun 5 2017, 11:14 PM

@Jdlrobson hey do you recall if we had a ticket for this same issue happening with some wide math formulas? I'm seeing it on enwiki > Lagrangian_point

Mhurd added a comment.Jun 5 2017, 11:56 PM

In interim, in lieu of a fix apps could hide these classes...

.mw-graph { display: none; }

@Jdlrobson Unfortunately every horizontal line div in the graph repeats the following:

style="width:750px; height:1px; background-color:#666; margin-top: 12px; margin-left: 28px; position:absolute; z-index:-1;"

So we still get funkiness even with .mw-graph { display: none; }:

Jdlrobson added a comment.EditedJun 6 2017, 12:28 AM

Just add the noresize class to the elements mw-graph instead. Although that really should be done inside the Graph extension.

Also the graph adds a min-width:750px
This would need to be overridden. That's not mobile friendly at all.

Oh wait. I see that the grid lines are done by spitting out the following HTML which has no class:

<div style="width:750px; height:1px; background-color:#666; margin-top: 12px; margin-left: 28px; position:absolute; z-index:-1;"></div>

oh dear.. that's not going to work is it..
A fix is definitely needed in the graph extension. These need to be wrapped my mw-graph as well.