Intersection Observer v2 #1080
Description
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
Even on chrome with support it is not perfect and there are bugs according to wpt.
Specification
https://w3c.github.io/IntersectionObserver/
Additional Signals
Tests
Standards Positions
-
Blink intent to Implementing: https://groups.google.com/a/chromium.org/g/blink-dev/c/tudxAHN9-AY/m/vz91o_aNDwAJ?pli=1
-
Mozilla positive: IntersectionObserver V2: Detecting occlusion and visual effects mozilla/standards-positions#109 (comment)
-
WebKit: IntersectionObserver V2: Detecting occlusion and visual effects WebKit/standards-positions#416
Mozilla has taken a positive standards position, and the V2 feature set has been merged into the spec by @szager-chromium
Existing Usage
-
Chrome's usecounter is at more than 9% of pageloads (https://chromestatus.com/metrics/feature/timeline/popularity/3051) which indicates developer interest in this feature as it is steadily growing. Cross browser compatibility would even further speed up the adoption.
-
In the Survey, "Intersection Observer" was selected by ~15% of survey takers
-
example implementation from Chrome: https://trick-ad-click.glitch.me/
Specification
https://w3c.github.io/IntersectionObserver/
web-feature
https://web-platform-dx.github.io/web-features-explorer/features/intersection-observer-v2/
Test Links
Additional Signals
No response