Page MenuHomePhabricator

Lazy loaded images: border-radius retained when images lazy loaded
Closed, DuplicatePublic1 Story Points

Description

@Krinkle:
"It seems like a spurious border-radius rule remains active even after the image has finished loading which results in a rendering difference between lazyload vs non-lazyload"

This happens when wgMFLazyLoadImages is enabled.

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 22 2016, 6:39 PM
Jdlrobson renamed this task from Lazy loaded images: border-radius not retained when images lazy loaded to Lazy loaded images: border-radius retained when images lazy loaded.Mar 22 2016, 6:40 PM

This could be solved by changing the JS code for lazy loading to replace the placeholder with the image once loaded.
There'd be no need to manually undo any styles left behind from the placeholder element (such as border-radius in this case), since the element won't be there in that case.

This would also help reduce memory usage in the DOM, and naturally fixes any layout differences by ensuring the DOM is the same in the end as without lazy loading. It would also make it match the layout of Noscript and Grade C experience which effectively already do this.

Just a note, careful with the animations (fade out placeholder, fade in loaded image) if replacing the element instead of nesting it there.

MBinder_WMF set the point value for this task to 1.May 16 2016, 4:17 PM

Change 289013 had a related patch set uploaded (by Krinkle):
Lazy-load: Remove the placeholder once the image has loaded

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