Bug 229687

Summary:	Lazyload does not work properly with negative margins
Product:	WebKit	Reporter:	Dominic Farolino <domfarolino>
Component:	Images	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal	CC:	rbuis, sabouhallawa, simon.fraser
Priority:	P2
Version:	Safari 14
Hardware:	Mac (Intel)
OS:	Unspecified

Description Dominic Farolino 2021-08-30 14:05:02 PDT

I'm a Chromium engineer, and while looking into a lazyload bug report on Chromium (crbug.com/994329#c14) I found that WebKit's lazyload implementation did not behave properly on a site using `loading=lazy` images. Specifically, there is a discrepancy between whether the IntersectionObserver API sees an image as "intersecting" vs whether the lazyload implementation sees an image as "intersection. See https://lazyload-study.glitch.me/crbug-994329.html for an example.

I think the IntersectionObserver API results should be the same as the lazyload implementation results, since LL is spec'd based off of IntersectionObserver: https://html.spec.whatwg.org/multipage/urls-and-fetching.html#start-intersection-observing-a-lazy-loading-element.

This works correctly in Chrome and Firefox.

Comment 1 Rob Buis 2021-08-31 01:11:28 PDT

Hi Dom, did you assume here lazy load is enabled in Safari releases? It is not.
I checked with a local build though, and using the mini browser the test case behaves as expected, i.e. the image does not load and IO status is false. Indeed we use IO internally so we should always pass this test case.

Comment 2 Dominic Farolino 2021-08-31 06:27:59 PDT

Oh wow, I didn't realize it was not enabled yet, I just assumed all modern browsers supported it. Thanks, looks like this can be closed

Comment 3 Rob Buis 2021-08-31 07:05:11 PDT

(In reply to Dominic Farolino from comment #2)
> Oh wow, I didn't realize it was not enabled yet, I just assumed all modern
> browsers supported it. Thanks, looks like this can be closed

Well, the test is still nice, I'll keep it in mind, thanks!