Web-Facing Change PSA: Lazy load scroll margin for iframes

[Yotam Hacohen]

Contact emails

yo...@google.com

Specification

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

Design docs

https://gist.github.com/tcaptan-cr/bf0ac25f77cb6b6c58c916e6577d91c3

Summary

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

Blink component

Blink>Paint

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 iframes that are currently loading with just a root margin.

Gecko: No signal

WebKit: No signal

Web developers: No signals

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

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

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

Yes

The following tests are testing this feature: https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-far.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-horizontal-far.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-horizontal.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-2.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-3.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-4.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-in-scroller-nested-5.html?label=master&label=experimental&aligned https://wpt.fyi/results/html/semantics/embedded-content/the-iframe-el

Flag name on chrome://flags

LazyLoadScrollMarginIframe

Finch feature name

LazyLoadScrollMarginIframe

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40943726

Estimated milestones

No milestones specified

Anticipated spec changes

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6292561099751424

This intent message was generated by Chrome Platform Status.