| Somnifuguist | |
| Jul 3 2021, 2:51 PM |
| F34537335: 1.png | |
| Jul 3 2021, 2:51 PM |
| F34537334: 3.png | |
| Jul 3 2021, 2:51 PM |
| F34537336: 2.png | |
| Jul 3 2021, 2:51 PM |
When horizontal scrolling on a graph drawn with https://en.wikipedia.org/wiki/Module:Graph on the mobile version of a page, e.g. at https://en.m.wikipedia.org/wiki/Demographics_of_Japan, the loading spinner appears from behind the graph and obstructs the view of it. Possibly related to: T275932: As loading spinner is always visible, border flashes when graph height is narrow (less than 47px).
Confirmed on:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Fix loading spinner when overflowing on mobile | mediawiki/extensions/Graph | master | +2 -5 |
Given that this is a reader-facing bug that obstructs the viewing of content on thousands of pages for mobile users, I've changed the priority to high.
@Somnifuguist: Do you plan to work on fixing this task, as you increased the priority of this task?
@ovasileva this is an issue with the graph extension which I don't think has any maintainers (and this team has no experience with). Should it be in our backlog?
<div class="mw-graph mw-graph-always mw-graph-nofallback" style="min-width:550px;min-height:150px" data-graph-id="1004fa1d7f062d1c32cb7a5c0baeb02b55aa746b"> <div class="Vega"> <canvas width="759" height="206" class="marks"> </canvas> </div> </div>
The mw-graph element has a background with the spinner and the overflow statement. The background of the div with the vega class is white, the loaded canvas element graph is transparent. When the canvas overflows, the vega div does NOT overflow, when you scroll you thus get the background of the canvas directly overlaying the background with the spinner.
Should be an easy fix.
Change 755485 had a related patch set uploaded (by TheDJ; author: TheDJ):
[mediawiki/extensions/Graph@master] Fix loading spinner when overflowing on mobile
Change 755485 merged by jenkins-bot:
[mediawiki/extensions/Graph@master] Fix loading spinner when overflowing on mobile
FYI: Mobile has more issues, especially before loading, due to sizing what is essentially an empty element now. But this issue already existed. I'll file a separate ticket about it.