1864794 - Use scrollMargin for lazy load intersection observer

Status: RESOLVED FIXED

(Core :: Layout, enhancement)

Description

[tcaptan]

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 issue 431.

Using scrollMargin for the lazy load intersection observer will allow lazy loading images to load when they are near the viewport as expected.

Comment 1

[Simon Pieters [:zcorpan]]

The spec PR has now been merged.

Comment 2

[Oliver Medhurst [:canadahonk]]

Blink's intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/CyG9T4ApdL4/m/L-KneyDHBgAJ

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1864794 - Use scrollMargin for image lazy loading. r=keithamus,#layout

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9ded204d1de9
https://hg.mozilla.org/integration/autoland/rev/326024f8f5a4
Use scrollMargin for image lazy loading. r=keithamus

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/acc5651bb965
https://hg.mozilla.org/integration/autoland/rev/bd631654e320
Fix some references to renamed prefs and annotate a WPT test as passing.

Comment 6

[amarc]

https://hg.mozilla.org/mozilla-central/rev/326024f8f5a4
https://hg.mozilla.org/mozilla-central/rev/bd631654e320