Page MenuHomePhabricator

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

Assigned To
None
Authored By
julbod
Mar 25 2017, 3:09 PM
Referenced Files
F8388053: Screen Shot 2017-06-05 at 4.52.44 PM.png
Jun 5 2017, 11:56 PM
F7061761: 2.mov.gif
Mar 28 2017, 10:40 PM
F6964636: IMG_3874.PNG
Mar 25 2017, 3:09 PM
F6964909: IMG_3876.PNG
Mar 25 2017, 3:09 PM
F6964639: IMG_3875.PNG
Mar 25 2017, 3:09 PM

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

IMG_3874.PNG (1×750 px, 146 KB)

IMG_3875.PNG (1×750 px, 109 KB)
Before scrolling to right
IMG_3876.PNG (1×750 px, 81 KB)
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)

2.mov.gif (720×632 px, 2 MB)

Event Timeline

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.

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!

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 Web-Team-Backlog board.
JMinor moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.

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

@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

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; }:

Screen Shot 2017-06-05 at 4.52.44 PM.png (859×1 px, 571 KB)

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.

Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptApr 10 2020, 9:32 AM