Lazy image loading broken (w/ IntersectionObserver)
Summary
Lazy image loading is broken on several browser due to usage of IntersectionObserverEntry.isIntersecting
, which is not available on them.
Steps to reproduce
Open any page on a gitlab and find none of the images loading, given you are using an affected browser.
What is the current bug behavior?
Almost none of the images load. Avatars on comments do load while the images in the comment don't.
What is the expected correct behavior?
Images should load as they scroll into view.
Possible fixes
Fallback to intersectionRatio
if isIntersecting
is undefined
.
I've also verified that early injection (before the first IntersectionObserver callback call) of the following polyfill does fix the problem:
Object.defineProperty(
IntersectionObserverEntry.prototype,
"isIntersecting",
{
enumerable: true,
configurable: true,
get: function(){
return this.intersectionRatio > 0;
}
}
);
Affected browser (according to caniuse.com)
- Edge 15
- Chrome 51-57
- Opera 38-44
- UC Browser for Android 11.8
- Samsung Internet 5-6.2
was tested on Chrome 57