Bug 230998

Summary:	Allow IntersectionObserver API to specify root for individual targets
Product:	WebKit	Reporter:	Nikos Mouchtaris <nmouchtaris>
Component:	New Bugs	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	jonlee, rbuis, simon.fraser, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified
See Also:	https://bugs.webkit.org/show_bug.cgi?id=208094

Description Nikos Mouchtaris 2021-09-29 16:12:29 PDT

IntersectionObserver API should allow the specification of multiple roots, depending on the target element. This is needed for lazy image loading, as for lazy load images in scrollable elements, we want to set their root to the scrollable element, not the viewport. The current implementation results in the images being loaded only once they partially enter the viewport, as their root is set to the top-level viewport, not the scrollable element.

Comment 1 Nikos Mouchtaris 2021-09-29 16:12:56 PDT

rdar://83693358

Comment 2 Nikos Mouchtaris 2021-09-29 17:16:42 PDT

https://github.com/w3c/IntersectionObserver/issues/431

Comment 3 Nikos Mouchtaris 2021-09-29 17:23:26 PDT

See that for image in scrollable div only gets loaded once it enters the viewport: https://codepen.io/nmoucht/pen/VwWgoPv.