Page MenuHomePhabricator

Lazy loaded images: Lazily loaded inline images cause reflow - should retain class attribute such as thumbborder
Open, NormalPublic3 Story Points

Description

Note: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together.

Steps to Reproduce

  1. Visit https://en.m.wikipedia.org/wiki/2018_FIFA_World_Cup
  2. Scroll quickly to the bottom of the page

Expected Results

  • Images load in place without shifting contents

Actual Results

  • Images sometimes shift the contents horizontally and vertically:

Environments Observed

Browser Version

  • Chromium v66.0.3359.181

OS Version

  • Ubuntu v18.04

Device Model

  • Desktop

Device Language

  • English

Precursor

Ensure T197188 and T200518 is estimated and also on the sprint board.

Developer notes

Original HTML (ignoring noscript)

<span style="white-space:nowrap">
  <span class="flagicon">
      <span class="lazy-image-placeholder" style="width: 23px;height: 15px;" data-src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/23px-Flag_of_Tunisia.svg.png" data-alt="" data-width="23" data-height="15" data-srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/35px-Flag_of_Tunisia.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/45px-Flag_of_Tunisia.svg.png 2x" data-class="thumbborder"> </span>
  </span>
  <a href="/wiki/Tunisia_national_football_team" title="Tunisia national football team">Tunisia</a>
</span>

is replaced with

<span style="white-space:nowrap">
  <span class="flagicon">
    <img class="thumbborder image-lazy-loaded" width="23" height="15" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/23px-Flag_of_Tunisia.svg.png" alt="" style="width: 23px;height: 15px;" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/35px-Flag_of_Tunisia.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Tunisia.svg/45px-Flag_of_Tunisia.svg.png 2x">&nbsp;</span>
  <a href="/wiki/Tunisia_national_football_team" title="Tunisia national football team">Tunisia</a>
</span>

The issue here is the thumbborder class adds a border to the image which changes the height and width of the image.
Let's ensure the lazy loaded image placeholder retains this thumbborder.
e.g.

<span class="lazy-image-placeholder"

becomes

<span class="lazy-image-placeholder thumbborder"

https://gerrit.wikimedia.org/r/448415 pulls out the LazyImageTransform from the MobileFormatter.
Right now we don't inspect the classes of the img tag - only the style.

Acceptance criteria

  • When creating the lazy-image-placeholder copy across the thumbborder class if it exists.
  • To minimise risk, do not copy across other classes, but let's ensure our solution allows expansion in future in case other classes need to be copied across
  • Make sure to add a test case to the new LazyImageTransform class.

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 11 2018, 5:37 PM

It may also relate to T162623, T159100, T160527, T159477. We should investigate precisely what's going on here to work out whether any of those are related.

Jdlrobson renamed this task from [Bug] Lazily loaded images cause reflow to [Bug] Lazily loaded inline images cause reflow - should retain thumbborder.Jul 12 2018, 3:04 PM
Jdlrobson updated the task description. (Show Details)
ovasileva set the point value for this task to 3.Jul 24 2018, 4:19 PM
Jdlrobson updated the task description. (Show Details)Jul 26 2018, 10:59 AM
Jdlrobson updated the task description. (Show Details)Jul 27 2018, 9:35 AM
Jdlrobson updated the task description. (Show Details)Jul 30 2018, 3:02 AM
Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 19 2018, 11:52 PM
Jdlrobson updated the task description. (Show Details)Nov 2 2018, 10:25 PM
Jdlrobson renamed this task from [Bug] Lazily loaded inline images cause reflow - should retain thumbborder to [Bug] Lazily loaded inline images cause reflow - should retain class attribute such as thumbborder.Nov 9 2018, 9:06 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from [Bug] Lazily loaded inline images cause reflow - should retain class attribute such as thumbborder to Lazy loaded images: Lazily loaded inline images cause reflow - should retain class attribute such as thumbborder.Nov 12 2018, 7:15 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Upcoming to Triaged but Future on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: ovasileva.

@ovasileva any chance we can schedule some time for this and the other 3 bugs listed as subtasks post-AMC deploy? (T229472 tracks them)