On itwiki it has been reported that images generated with EasyTimeline (i.e. using the timeline tag) will be hidden by MobileFrontend: see for instance this desktop version (with 2 graphs) and its mobile counterpart, with no graphs. The problem is also reported not to happen everywhere: for instance, here (which is the template where the above graph is generated).
Digging a bit, I found out that
- This happens when MF tries to rebuild the image to use lazy-loading
- It doesn't happen everywhere because (if I'm not mistaken) MF only lazy-loads images bigger than a certain dimension and not in the initial section of the page
- The image generated by EasyTimeline doesn't have width or height attributes. Thus, the lazy-loader sets 0 as default.
Now, my first doubt is why the image doesn't have width/height, given that ImageSize is specified inside the timeline tag. At any rate, MF shouldn't probably set a 0 as default like that, since this causes the image to be hidden. Of note, that bit of code has been changed recently in https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/487922/ by @Niedzielski, and I wonder if that could be related. I'm especially confused by this comment at line 36:
data-width and height are attributes and do not specify dimension.
This is now outdated (we don't use data-* anymore there), and it seems like it was intentional to avoid using attributes which would set a dimension.
All of the above seems to mean that this bug actually affects any image without width/height specified, although ATM I cannot investigate any further.
UPDATE: Yes, this affects any image without explicitly set dimension, as suspected. The patch mentioned above isn't culprit either (it just left a confusing comment in place).
EasyTimeline when outputting HTML omits width and height which are important (for performance).
EasyTimeline does not define an explicit width and height. If it is updated to do so, this will work (and will also improve display of the timeline in desktop as browsers will no up front how much space to reserve for it)
<div class="timeline-wrapper"> <map name="timeline_22701c2adfd3b605f0a54e202c5c1fdc"></map> <img usemap="#timeline_22701c2adfd3b605f0a54e202c5c1fdc" src="//upload.wikimedia.org/wikipedia/it/timeline/22701c2adfd3b605f0a54e202c5c1fdc.png"> </div>
<div class="timeline-wrapper"> <map name="timeline_22701c2adfd3b605f0a54e202c5c1fdc"></map> <img usemap="#timeline_22701c2adfd3b605f0a54e202c5c1fdc" width="??" height="??" src="//upload.wikimedia.org/wikipedia/it/timeline/22701c2adfd3b605f0a54e202c5c1fdc.png"> </div>