IntersectionObserver V2
Background: IntersectionObserver V1
Send a notification whenever the intersection between an element and one of its ancestors (or the document window) changes.
�Useful for:
Background: IntersectionObserver V1
V1 spec developed via the Web Platform Incubator Community Group (WICG).
Shipped in Chrome M51, subsequently shipped in Firefox and Edge; WebKit in active development.
Used in ~10% of web page loads (!)
Recently migrated to the formal standards track:� https://www.w3.org/TR/intersection-observer/
What’s missing from V1
IntersectionObserver only detects overflow and clip-path clipping. It does not understand or detect occlusion due to:
Proposal for V2
The argument for V2
Big opportunity to eliminate fraud and enable trust relationships between iframes and embedders.
V2 Use Cases
Trusted interaction between e-commerce site and embedded payment widget.
V2 Use Cases
Ad-stacking: displaying multiple overlapping ads
V2 Use Cases
Click-jacking
Constraints and Strategies
Must be performant -- no pixel readbacks!
False negatives are OK (reporting occlusion when target is visible), but false positives are not (reporting visible when target is occluded).
Chromium implementation will walk GraphicLayer tree and DisplayItem list.
Geometry calculations will be conservative and rectilinear (no messing around with border-radius).
Any opacity greater than zero will be considered occluding. Any transform other than a 2D translate will be considered 100% occlusion.