Intersection Observer v2

[BearCooder]

Description

Intersection Observer v2 introduces the concept of tracking the actual "visibility" of a target element as a human being would define it. By setting an option in the IntersectionObserver constructor, intersecting IntersectionObserverEntry instances will then contain a new boolean field named isVisible. A true value for isVisible is a strong guarantee from the underlying implementation that the target element is completely unoccluded by other content and has no visual effects applied that would alter or distort its display on screen. In contrast, a false value means that the implementation cannot make that guarantee.

An important detail of the spec is that the implementation is permitted to report false negatives (that is, setting isVisible to false even when the target element is completely visible and unmodified). For performance or other reasons, browsers limit themselves to working with bounding boxes and rectilinear geometry; they don't try to achieve pixel-perfect results for modifications like border-radius.

That said, false positives are not permitted under any circumstances (that is, setting isVisible to true when the target element is not completely visible and unmodified).

The IntersectionObserver constructor now takes two additional configuration properties: delay and trackVisibility. The delay is a number indicating the minimum delay in milliseconds between notifications from the observer for a given target. The trackVisibility is a boolean indicating whether the observer will track changes in a target's visibility.

This information is from the following source

supporting links:

Delay
TrackVisibility
isVisible

v2 is supported by Chrome but not on Firefox and Safari. Its not even mentioned in the MDN doc, an open issue for the MDN doc is open here mdn/content#19201

Rationale

First time when I found out about Intersection Observer v2 I was thrilled and tested it myself just to find out its a "Chrome exclusive" for now which is a big bummer.

The great Article on web dev summarizes the benefits, an excerpt:

_Intersection Observer v2 introduces the concept of tracking the actual "visibility" of a target element as a human being would define it. By setting an option in the IntersectionObserver constructor, intersecting IntersectionObserverEntry instances will then contain a new boolean field named isVisible. A true value for isVisible is a strong guarantee from the underlying implementation that the target element is completely unoccluded by other content and has no visual effects applied that would alter or distort its display on screen. In contrast, a false value means that the implementation cannot make that guarantee.

An important detail of the spec is that the implementation is permitted to report false negatives (that is, setting isVisible to false even when the target element is completely visible and unmodified). For performance or other reasons, browsers limit themselves to working with bounding boxes and rectilinear geometry; they don't try to achieve pixel-perfect results for modifications like border-radius.

That said, false positives are not permitted under any circumstances (that is, setting isVisible to true when the target element is not completely visible and unmodified)._

Specification

https://w3c.github.io/IntersectionObserver/v2/#calculate-visibility-algo

Tests

No response

[gsnedders]

Tests

No response

https://wpt.fyi/results/intersection-observer/v2?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest

[ghost]

Looking forward to see support for v2 accross all major Browsers, I am working with animations and the delay is great for a better timing of the animations while scrolling!

[progers]

Chrome's usecounter is at 4.5% of pageloads (https://chromestatus.com/metrics/feature/timeline/popularity/3051) which indicates developer interest in this feature.

[foolip]

In the MDN short survey on APIs & JavaScript, "Intersection Observer" was selected by ~15% of survey takers, putting it in the middle third of options. (There is some uncertainty as with any survey data.)

[BearCooder]

So this means that ~15% of survey takers is not enough?

[dvkam]

Chrome's usecounter is at 4.5% of pageloads (https://chromestatus.com/metrics/feature/timeline/popularity/3051) which indicates developer interest in this feature.

Btw it crossed 5%, the developer interest in v2 is here and the numbers will likely shoot up when all major browsers support it.

[nairnandu]

Thank you for proposing Intersection Observer v2 for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. However this should not be taken as a comment on the technology as a whole, and resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.