← Back to release summary

Lazy load scroll margin for iframes

Category
Performance
Type
No developer-visible change
Status
In development (Chrome In development)
Intent stage
None

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.

Motivation

Currently the lazy load intersection observer is set up using a rootMargin. This does not work well for pages that use iframes in CSS scrollers, like carousels, causing the iframes 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. A relates problem for lazy loaded images 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 iframes in scrollers to load when they are near the viewport as expected.

Standards & signals

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

View on chromestatus.com