Page MenuHomePhabricator

Lazy loaded images are not restricted to 100% viewport width, unlike before
Closed, ResolvedPublic2 Story Points

Description

Since we started lazy loading images on the mobile website, we are no longer restricting all images to 100% of the viewport. This is because lazy loaded images are one level 'deeper' and thus the direct child selector of

.content a > img {
    max-width: 100% !important;
    height: auto !important
}

no longer matches.

To take an example go to Russia#Get in on Wikivoyage:
https://en.m.wikivoyage.org/wiki/Russia
On a mobile screen (e.g. iPhone) the lazy loaded image placeholder and the loaded image force themselves out of the viewport.

Event Timeline

TheDJ created this task.Jan 3 2017, 12:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 3 2017, 12:53 PM
TheDJ updated the task description. (Show Details)Jan 3 2017, 1:34 PM
ovasileva triaged this task as High priority.Jan 25 2017, 7:33 PM
ovasileva moved this task from Needs Analysis to Upcoming on the Readers-Web-Backlog board.
ovasileva set the point value for this task to 2.
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMar 7 2017, 7:40 PM

Take https://en.m.wikivoyage.org/wiki/Russia
and the maps under the Regions section and the Get In section are another example of this.

phuedx added a subscriber: phuedx.

Moving this to Triaged but Future as it's been in Sprint +1 for approaching 3 months.

Ping @Jdlrobson. Is there a tracking task for general issues with lazy loaded images (and not just inline images like T162623: Problems with lazy loaded inline images).

Jdlrobson added a subscriber: ovasileva.

@phuedx nope.. and that's on purpose. This is the only task unrelated to inline images. I'm going to push this for sprint +1 (for realz this time) since we will be working on related tasks. I'll chat to @ovasileva about use of sprint +1 column later today.

It worked!!1 😉

Much trickier than I first thought.. the issue is we copy width and height to the inline style of the placeholder.

Adding the rule

a > .lazy-image-placeholder img

has no impact .. unless we remove the inline style after lazy loading.. but I'm not sure if that will have other side effects. Investigating...

Change 349107 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Restrict lazy loaded images to the viewport

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

EddieGP moved this task from Backlog to Doing on the good first bug board.Apr 20 2017, 10:47 PM

This will stay open for a little while, while I wait for the change to roll out and test.

Jdlrobson closed this task as Resolved.Apr 27 2017, 11:51 PM

Get in example is fixed. Confident we can resolve this.

Change 349107 abandoned by Jdlrobson:
Restrict lazy loaded images to the viewport

Reason:
Resolved by using replaceWith instead

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