Note: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together.
Steps to Reproduce
- Visit https://en.m.wikipedia.org/wiki/2018_FIFA_World_Cup
- 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"> </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.
Another root of issue is inconsistency in css between img and lazy-image-placeholder.
.content img { vertical-align: middle; }
The thing is that originally placeholder is a span that dynamically changed on img. Therefore css rule starts working after that and causes that shift.
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.
QA Results - Beta - Aug 8, 2020
| AC | Status | Details | |
|---|---|---|---|
| 1 | ❌ | T199351#6370886 | |
QA Results - Beta - Aug 17, 2020
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T199351#6391790 |
QA Results - Beta - Aug 24, 2020
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T199351#6408055 |
QA Results - Prod - Aug 26, 2020
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T199351#6414848 |
QA Results - Prod - Aug 27, 2020
| AC | Status | Details |
|---|---|---|
| 1 | ❌ | T199351#6417638 |
QA Results - Prod - Aug 27, 2020
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T199351#6418022 |
