Page MenuHomePhabricator

EasyTimeline outputs an image with no width and height dimensions which is incompatible with MobileFrontend lazy loading
Open, NormalPublic

Description

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).

Developer notes

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>

should become

<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>

Event Timeline

Daimona created this task.Feb 16 2019, 1:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 16 2019, 1:02 PM
Daimona renamed this task from Timeline images are hidden by MobileFrontend to MobileFrontend hides images without explicit dimension.Feb 17 2019, 5:21 PM
Daimona updated the task description. (Show Details)
ovasileva triaged this task as Normal priority.Feb 19 2019, 3:37 PM
ovasileva added a project: Readers-Web-Backlog.
ovasileva added a subscriber: Larske.
Jdlrobson renamed this task from MobileFrontend hides images without explicit dimension to EasyTimeline outputs an image with no width and height dimensions which is incompatible with MobileFrontend lazy loading.Feb 19 2019, 6:01 PM
Jdlrobson updated the task description. (Show Details)
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptMar 26 2019, 8:47 PM
Lofhi added a subscriber: Lofhi.Jun 14 2019, 9:28 PM

Any updates?

Change 517179 had a related patch set uploaded (by Aklapper; owner: Aklapper):
[mediawiki/extensions/timeline@master] Add image dimensions (width, height) to HTML output

https://gerrit.wikimedia.org/r/517179

Not sure why this was triaged as "Normal" priority by Readers-Web if it's only under "Tracking".

Patch linked above is entirely untested and might be utterly wrong. Note that EasyTimeline is unmaintained deprecated software, see T137291: Transition all use of EasyTimeline to the Graph extension and decommission it from Wikimedia's servers.

Also see T216431: Graphs create img tags without width and height about the same issue with the Graph extension.