Topic on Template talk:Graph:Street map with marks

Problem with maps in mobile version pages

7
RobinLeicester (talkcontribs)

It has become apparent that the 'graph' originated maps are having trouble displaying on the mobile version of en:wikipedia. I have narrowed the problem down to maps that are in a subsection of the page. If it is in the opening section/lead there is no problem - and they all display fine on the 'normal' wikipedia. But on the mobile version of a page, the ones in a subsection just display as empty boxes. You can see this in my sandbox. The one at https://en.wikipedia.org/wiki/User:RobinLeicester/sandbox havefive different maps, including one direct from Graph:Street map with marks, and one using template:maplink. Whereas the mobile version https://en.m.wikipedia.org/wiki/User:RobinLeicester/sandbox displays the first map (above the 'rest' subsection) and displays the maplink one, but all the others are just white boxes. My guess is that this is related to the way the graph template expects to find the rendered image, and presumably the mobile sections do something non-standard that messes it up. If anything can be done to resolve it, that would be great.

RobinLeicester (talkcontribs)

After a look at some of the source code on the pages affected, I would guess it is to do with the 'lazy image loading' feature failing to find the rendered image. @Yurik, Is this something you may be able to look at?

RobinLeicester (talkcontribs)

A bit more digging around the html properties of affected mobile pages (and bearing in mind that I don't really understand the mechanics of html or the lazy loader) has revealed that the 'active' part of the src instruction (as opposed to the <noscript> part) reads as

<img width="0" height="0" class="mw-graph-img image-lazy-loaded" alt="" src="/api/rest_v1/page/graph/png/....png" srcset style>

So the reason nothing is visible is that there is no width or height. But I have no idea how the lazy loader finds these sizes, or why it is failing.

Comparing this to a commons image, this has

<img width="400" height="300" class="thumbimage image-lazy-loaded" alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/53/....jpg" srcset="" style="width: 400px; height: 300px;">

RobinLeicester (talkcontribs)

I have now posted this problem on the German version of Module:Graph, as it seems to affect all Graph based images, and that seems to be the 'lead' version.

RobinLeicester (talkcontribs)

There is a phab:T216431 which describes this but has not so far resulted in any progress.

RobinLeicester (talkcontribs)

A fix has been discovered by Nehme1499. Graph:Chart seems to have found a way to switch off the lazy loader (or resolve the issue by whatever means) and simply including a pie chart of zero size is enough for any other Graph: based templates on the same page to also work in mobile view.

RobinLeicester (talkcontribs)

A Css fix was the real solution, which inherits the width values etc, and means lazy loader is retained and works as it should. I have applied this via an associated styles.css file. More details at phab:T216431

Reply to "Problem with maps in mobile version pages"