Intent to Prototype: Lazy load scroll margin

[Traian Captan]

Contact emails

tca...@chromium.org

Explainer

None

Specification

https://html.spec.whatwg.org/#lazy-load-root-margin

Summary

Changes the lazy load intersection observer's init dictionary to use a scrollMargin instead of a rootMargin. This allows lazy loading images contained inside CSS scrollers, like carousels, to load as expected when near the viewport instead of the current behavior where these images load when at least one pixel is intersecting the viewport.

Blink component

Blink>Image

Motivation

Currently the lazy load intersection observer is set up using a rootMargin. This does not work well for pages that use images in CSS scrollers, like carousels, causing the images to load too late, when they become visible and the intersection with the root is detected. To work around this issue some developers are choosing to not use lazy loading, thus increasing the overall bandwidth usage for their sites. This problem was discussed in github issue 431 (https://github.com/w3c/IntersectionObserver/issues/431). Using scrollMargin for the lazy load intersection observer will allow lazy loading images in scrollers to load when they are near the viewport as expected.

Initial public proposal

None

Search tags

lazyload, scrollmargin

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Overall low as scroll margin also applies to the root element thus not affecting lazy loading images that are currently loading with just a root margin.

Gecko: Positive (https://github.com/w3c/IntersectionObserver/issues/431) https://bugzilla.mozilla.org/show_bug.cgi?id=1864794

WebKit: Positive (https://github.com/w3c/IntersectionObserver/issues/431#issuecomment-930602435) https://bugs.webkit.org/show_bug.cgi?id=264864

Web developers: Positive (https://bugs.chromium.org/p/chromium/issues/detail?id=1391989)

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/html/semantics/embedded-content/the-img-element?label=master&label=experimental&aligned&q=image-loading-lazy-in-

Flag name on chrome://flags

LazyLoadScrollMargin

Finch feature name

None

Non-finch justification

This feature is behind an enabled-by-default flag that can be disabled if needed.

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1391989

Estimated milestones

Shipping on desktop	121
DevTrial on desktop	121

Shipping on Android	121
DevTrial on Android	121

Shipping on WebView

121

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5106926245642240

This intent message was generated by Chrome Platform Status.