Page MenuHomePhabricator

Lazy loaded images are not restricted to 100% viewport width, unlike before
Closed, ResolvedPublic2 Estimated 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.

15826565_10211370751455367_1231789148194373480_n.jpg (960×539 px, 58 KB)
15844337_10154891612967929_7652639222167074891_o.jpg (1×571 px, 130 KB)

Event Timeline

ovasileva moved this task from Needs Prioritization to Upcoming on the Web-Team-Backlog board.
ovasileva set the point value for this task to 2.
phuedx subscribed.

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.

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

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

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