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

Jdlrobson moved this task from To Do to Doing on the Reading-Web-Sprint-96 board.Apr 19 2017, 6:44 PM

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

Jdlrobson updated the task description. (Show Details)Apr 19 2017, 10:02 PM

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

phuedx assigned this task to Jdlrobson.Apr 20 2017, 8:36 AM
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