1. Introduction
The web’s traditional position calculation mechanisms rely on explicit queries of DOM state that are known to cause (expensive) style recalculation and layout and, frequently, are a source of significant performance overhead due to continuous polling for this information.
A body of common practice has evolved that relies on these behaviors, however, including (but not limited to):
-
Building custom pre- and deferred-loading of DOM and data.
-
Implementing data-bound high-performance scrolling lists which load and render subsets of data sets. These lists are a central mobile interaction idiom.
-
Calculating element visibility. In particular, ad networks now require reporting of ad "visibility" for monetizing impressions. This has led to many sites abusing scroll handlers (causing jank on scroll), synchronous layout invoking readbacks (causing unnecessary critical work in rAF loops), and resorting to exotic plugin-based solutions for computing "true" element visibility (with all the associated overhead of the plugin architecture).
These use-cases have several common properties:
-
They can be represented as passive "queries" about the state of individual elements with respect to some other element (or the global viewport).
-
They do not impose hard latency requirements; that is to say, the information can be delivered asynchronously (e.g. from another thread) without penalty.
-
They are poorly supported by nearly all combinations of existing web platform features, requiring extraordinary developer effort despite their widespread use.
A notable non-goal is pixel-accurate information about what was actually displayed (which can be quite difficult to obtain efficiently in certain browser architectures in the face of filters, webgl, and other features). In all of these scenarios the information is useful even when delivered at a slight delay and without perfect compositing-result data.
The Intersection Observer API addresses the above issues by giving developers a new method to asynchronously query the position of an element with respect to other elements or the global viewport. The asynchronous delivery eliminates the need for costly DOM and style queries, continuous polling, and use of custom plugins. By removing the need for these methods it allows applications to significantly reduce their CPU, GPU and energy costs.
var observer= new IntersectionObserver( changes=> { for ( const changeof changes) { console. log( change. time); // Timestamp when the change occurred console. log( change. rootBounds); // Unclipped area of root console. log( change. boundingClientRect); // target.boundingClientRect() console. log( change. intersectionRect); // boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds console. log( change. intersectionRatio); // Ratio of intersectionRect area to boundingClientRect area console. log( change. target); // the Element target } }, {}); // Watch for intersection events on a specific target Element. observer. observe( target); // Stop watching for intersection events on a specific target Element. observer. unobserve( target); // Stop observing threshold events on all target elements. observer. disconnect();
2. Intersection Observer
The Intersection Observer API enables developers to understand the visibility and position of target DOM elements relative to an intersection root.
2.1. The IntersectionObserverCallback
callback =
IntersectionObserverCallback undefined (sequence <IntersectionObserverEntry >,
entries IntersectionObserver );
observer
This callback will be invoked when there are changes to target’s intersection with the intersection root, as per the processing model.
2.2. The IntersectionObserver interface
In all current engines.
Opera38+Edge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+Opera Mobile41+
The IntersectionObserver
interface can be used to observe changes in the
intersection of an intersection root and one or more target Element
s.
The intersection root for an IntersectionObserver
is the value of its root
attribute
if the attribute is non-null
;
otherwise, it is the top-level browsing context’s document
node,
referred to as the implicit root.
An IntersectionObserver
with a non-null
root
is referred to as an explicit root observer,
and it can observe any target Element
that is a descendant of the root
in the containing block chain.
An IntersectionObserver
with a null
root
is referred to as an implicit root observer.
Valid targets for an implicit root observer include
any Element
in the top-level browsing context,
as well as any Element
in any nested browsing context which is in the list of the descendant browsing contexts of the top-level browsing context.
When dealing with implicit root observers, the API makes a distinction between a target whose relevant settings object’s origin is same origin-domain with the top-level origin, referred to as a same-origin-domain target; as opposed to a cross-origin-domain target. Any target of an explicit root observer is also a same-origin-domain target, since the target must be in the same document as the intersection root.
Note: In MutationObserver
, the MutationObserverInit
options are passed
to observe()
while in IntersectionObserver
they are
passed to the constructor. This is because for MutationObserver, each Node
being observed could have a different set of attributes to filter for. For IntersectionObserver
, developers may choose to use a single observer to
track multiple targets using the same set of options; or they may use a different
observer for each tracked target. rootMargin
or threshold
values for each target seems to introduce more complexity without solving additional
use-cases. Per-observe()
options could be provided in the future if the need arises.
[Exposed =Window ]interface {
IntersectionObserver constructor (IntersectionObserverCallback ,
callback optional IntersectionObserverInit = {});
options readonly attribute (Element or Document )?root ;readonly attribute DOMString rootMargin ;readonly attribute FrozenArray <double >thresholds ;undefined observe (Element );
target undefined unobserve (Element );
target undefined disconnect ();sequence <IntersectionObserverEntry >takeRecords (); };
-
IntersectionObserver/IntersectionObserver
In all current engines.
Firefox55+Safari12.1+Chrome51+
Opera38+Edge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+new IntersectionObserver(callback, options)
-
Return the result of running the initialize a new IntersectionObserver algorithm, providing callback and options.
-
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+observe(target)
-
Run the observe a target Element algorithm, providing this and target.
-
IntersectionObserver/unobserve
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+unobserve(target)
-
Run the unobserve a target Element algorithm, providing this and target.
Note:
MutationObserver
does not implementunobserve()
. ForIntersectionObserver
,unobserve()
addresses the lazy-loading use case. After target becomes visible, it does not need to be tracked. It would be more work to eitherdisconnect()
all targets andobserve()
the remaining ones, or create a separateIntersectionObserver
for each target. -
IntersectionObserver/disconnect
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+disconnect()
-
For each target in this’s internal
[[ObservationTargets]]
slot:-
Remove the
IntersectionObserverRegistration
record whoseobserver
property is equal to this from target’s internal[[RegisteredIntersectionObservers]]
slot. -
Remove target from this’s internal
[[ObservationTargets]]
slot.
-
-
IntersectionObserver/takeRecords
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+takeRecords()
-
-
Let queue be a copy of this’s internal
[[QueuedEntries]]
slot. -
Clear this’s internal
[[QueuedEntries]]
slot. -
Return queue.
-
-
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+root
, of type(Element or Document)
, readonly, nullable -
The
root
provided to theIntersectionObserver
constructor, ornull
if none was provided. rootMargin
, of type DOMString, readonly-
Offsets applied to the root intersection rectangle, effectively growing or shrinking the box that is used to calculate intersections. These offsets are only applied when handling same-origin-domain targets; for cross-origin-domain targets they are ignored.
On getting, return the result of serializing the elements of
[[rootMargin]]
space-separated, where pixel lengths serialize as the numeric value followed by "px", and percentages serialize as the numeric value followed by "%". Note that this is not guaranteed to be identical to the options.rootMargin
passed to theIntersectionObserver
constructor. If norootMargin
was passed to theIntersectionObserver
constructor, the value of this attribute is "0px 0px 0px 0px". -
IntersectionObserver/thresholds
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+thresholds
, of type FrozenArray<double>, readonly -
A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no options.
threshold
was provided to theIntersectionObserver
constructor, the value of this attribute will be [0].
The root intersection rectangle for an IntersectionObserver
is the rectangle we’ll use to check against the targets.
- If the
IntersectionObserver
is an implicit root observer, - it’s treated as if the root were the top-level browsing context’s
document
, according to the following rule fordocument
. - If the intersection root is a
document
, - it’s the size of the
document
's viewport (note that this processing step can only be reached if thedocument
is fully active). - Otherwise, if the intersection root has an overflow clip,
- it’s the element’s content area.
- Otherwise,
- it’s the result of running the
getBoundingClientRect()
algorithm on the intersection root.
When calculating the root intersection rectangle for
a same-origin-domain target, the rectangle is then expanded
according to the offsets in the IntersectionObserver
’s [[rootMargin]]
slot
in a manner similar to CSS’s margin property,
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
with positive lengths indicating an outward offset.
Percentages are resolved relative to the width of the undilated rectangle.
Note: rootMargin
only applies to the intersection root itself.
If a target Element
is clipped by an ancestor other than the intersection root, that clipping is unaffected by rootMargin
.
Note: Root intersection rectangle is not affected by pinch zoom and will report the unadjusted viewport, consistent with the intent of pinch zooming (to act like a magnifying glass and NOT change layout.)
To parse a root margin from an input string marginString, returning either a list of 4 pixel lengths or percentages, or failure:
-
Parse a list of component values marginString, storing the result as tokens.
-
Remove all whitespace tokens from tokens.
-
If the length of tokens is greater than 4, return failure.
-
If there are zero elements in tokens, set tokens to ["0px"].
-
Replace each token in tokens:
-
If token is an absolute length dimension token, replace it with a an equivalent pixel length.
-
If token is a <percentage> token, replace it with an equivalent percentage.
-
Otherwise, return failure.
-
-
If there is one element in tokens, append three duplicates of that element to tokens. Otherwise, if there are two elements are tokens, append a duplicate of each element to tokens. Otherwise, if there are three elements in tokens, append a duplicate of the second element to tokens.
-
Return tokens.
2.3. The IntersectionObserverEntry interface
In all current engines.
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+
[Exposed =Window ]interface {
IntersectionObserverEntry (
constructor IntersectionObserverEntryInit );
intersectionObserverEntryInit readonly attribute DOMHighResTimeStamp time ;readonly attribute DOMRectReadOnly ?rootBounds ;readonly attribute DOMRectReadOnly boundingClientRect ;readonly attribute DOMRectReadOnly intersectionRect ;readonly attribute boolean isIntersecting ;readonly attribute double intersectionRatio ;readonly attribute Element target ; };dictionary {
IntersectionObserverEntryInit required DOMHighResTimeStamp ;
time required DOMRectInit ?;
rootBounds required DOMRectInit ;
boundingClientRect required DOMRectInit ;
intersectionRect required boolean ;
isIntersecting required double ;
intersectionRatio required Element ; };
target
-
IntersectionObserverEntry/boundingClientRect
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+boundingClientRect
, of type DOMRectReadOnly, readonly -
A
DOMRectReadOnly
obtained by running thegetBoundingClientRect()
algorithm on thetarget
. -
IntersectionObserverEntry/intersectionRect
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+intersectionRect
, of type DOMRectReadOnly, readonly -
boundingClientRect
, intersected by each oftarget
's ancestors' clip rects (up to but not includingroot
), intersected with the root intersection rectangle. This value represents the portion oftarget
actually visible within the root intersection rectangle. -
IntersectionObserverEntry/isIntersecting
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)16+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+isIntersecting
, of type boolean, readonly -
True if the
target
intersects with theroot
; false otherwise. This flag makes it possible to distinguish between anIntersectionObserverEntry
signalling the transition from intersecting to not-intersecting; and anIntersectionObserverEntry
signalling a transition from not-intersecting to intersecting with a zero-area intersection rect (as will happen with edge-adjacent intersections, or when theboundingClientRect
has zero area). -
IntersectionObserverEntry/intersectionRatio
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+intersectionRatio
, of type double, readonly -
If the
boundingClientRect
has non-zero area, this will be the ratio ofintersectionRect
area toboundingClientRect
area. Otherwise, this will be 1 if theisIntersecting
is true, and 0 if not. -
IntersectionObserverEntry/rootBounds
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+rootBounds
, of type DOMRectReadOnly, readonly, nullable -
For a same-origin-domain target, this will be the root intersection rectangle. Otherwise, this will be
null
. Note that if the target is in a different browsing context than the intersection root, this will be in a different coordinate system thanboundingClientRect
andintersectionRect
. -
IntersectionObserverEntry/target
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+target
, of type Element, readonly -
The
Element
whose intersection with the intersection root changed. -
IntersectionObserverEntry/time
Firefox55+Safari?Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
Chrome for Android51+Android WebView51+Samsung Internet5.0+time
, of type DOMHighResTimeStamp, readonly -
The attribute must return a
DOMHighResTimeStamp
that corresponds to the time the intersection was recorded, relative to the time origin of the global object associated with the IntersectionObserver instance that generated the notification.
2.4. The IntersectionObserverInit dictionary
dictionary { (
IntersectionObserverInit Element or Document )?root =null ;DOMString rootMargin = "0px"; (double or sequence <double >)threshold = 0; };
root
, of type(Element or Document)
, nullable, defaulting tonull
-
The
root
to use for intersection. If not provided, use the implicit root. -
IntersectionObserver/rootMargin
In all current engines.
Firefox55+Safari12.1+Chrome51+
OperaYesEdge79+
Edge (Legacy)15+IENone
iOS Safari12.2+Chrome for Android51+Android WebView51+Samsung Internet5.0+rootMargin
, of type DOMString, defaulting to"0px"
-
Similar to the CSS margin property, this is a string of 1-4 components, each either an absolute length or a percentage.
"5px" // all margins set to 5px "5px 10px" // top & bottom = 5px, right & left = 10px "-10px 5px 8px" // top = -10px, right & left = 5px, bottom = 8px "-10px -5px 5px 8px" // top = -10px, right = -5px, bottom = 5px, left = 8px threshold
, of type(double or sequence<double>)
, defaulting to0
-
List of threshold(s) at which to trigger callback. callback will be invoked when intersectionRect’s area changes from greater than or equal to any threshold to less than that threshold, and vice versa.
Threshold values must be in the range of [0, 1.0] and represent a percentage of the area of the rectangle produced by running the
getBoundingClientRect()
algorithm on the target.Note: 0.0 is effectively "any non-zero number of pixels".
3. Processing Model
This section outlines the steps the user agent must take when implementing the Intersection Observer API.
3.1. Internal Slot Definitions
3.1.1. Document
Each document
has an IntersectionObserverTaskQueued flag
which is initialized to false.
3.1.2. Element
Element
objects have an internal [[RegisteredIntersectionObservers]]
slot,
which is initialized to an empty list.
This list holds IntersectionObserverRegistration
records,
which have an observer
property
holding an IntersectionObserver
, a previousThresholdIndex
property
holding a number between -1 and the length of the observer’s thresholds
property (inclusive), and
a previousIsIntersecting
property holding a boolean.
3.1.3. IntersectionObserver
IntersectionObserver
objects have internal [[QueuedEntries]]
and [[ObservationTargets]]
slots,
which are initialized to empty lists and an internal [[callback]]
slot
which is initialized by IntersectionObserver(callback, options)
.
They also have an internal [[rootMargin]]
slot
which is a list of four pixel lengths or percentages.
3.2. Algorithms
3.2.1. Initialize a new IntersectionObserver
To initialize a new IntersectionObserver, given an IntersectionObserverCallback
callback and an IntersectionObserverInit
dictionary options, run these steps:
-
Let this be a new
IntersectionObserver
object -
Set this’s internal
[[callback]]
slot to callback. -
Attempt to parse a root margin from options.
rootMargin
. If a list is returned, set this’s internal[[rootMargin]]
slot to that. Otherwise, throw aSyntaxError
exception. -
Let thresholds be a list equal to options.
threshold
. -
If any value in thresholds is less than 0.0 or greater than 1.0, throw a
RangeError
exception. -
Sort thresholds in ascending order.
-
If thresholds is empty, append
0
to thresholds. -
The
thresholds
attribute getter will return this sorted thresholds list. -
Return this.
3.2.2. Observe a target Element
To observe a target Element, given an IntersectionObserver
observer and an Element
target, follow these steps:
-
If target is in observer’s internal
[[ObservationTargets]]
slot, return. -
Let intersectionObserverRegistration be an
IntersectionObserverRegistration
record with anobserver
property set to observer, apreviousThresholdIndex
property set to-1
, and apreviousIsIntersecting
property set tofalse
. -
Append intersectionObserverRegistration to target’s internal
[[RegisteredIntersectionObservers]]
slot. -
Add target to observer’s internal
[[ObservationTargets]]
slot. -
Schedule an iteration of the event loop in the
root
's browsing context.
3.2.3. Unobserve a target Element
To unobserve a target Element, given an IntersectionObserver
observer and an Element
target, follow these steps:
-
Remove the
IntersectionObserverRegistration
record whoseobserver
property is equal to this from target’s internal[[RegisteredIntersectionObservers]]
slot, if present. -
Remove target from this’s internal
[[ObservationTargets]]
slot, if present
3.2.4. Queue an Intersection Observer Task
The IntersectionObserver task source is a task source used for scheduling tasks to § 3.2.5 Notify Intersection Observers.
To queue an intersection observer task for a document
document,
run these steps:
-
If document’s IntersectionObserverTaskQueued flag is set to true, return.
-
Set document’s IntersectionObserverTaskQueued flag to true.
-
Queue a task on the IntersectionObserver task source associated with the
document
's event loop to notify intersection observers.
3.2.5. Notify Intersection Observers
To notify intersection observers for a document
document,
run these steps:
-
Set document’s IntersectionObserverTaskQueued flag to false.
-
Let notify list be a list of all
IntersectionObserver
s whoseroot
is in the DOM tree of document. -
For each
IntersectionObserver
object observer in notify list, run these steps:-
If observer’s internal
[[QueuedEntries]]
slot is empty, continue. -
Let queue be a copy of observer’s internal
[[QueuedEntries]]
slot. -
Clear observer’s internal
[[QueuedEntries]]
slot. -
Let callback be the value of observer’s internal
[[callback]]
slot. -
Invoke callback with queue as the first argument, observer as the second argument, and observer as the callback this value. If this throws an exception, report the exception.
-
3.2.6. Queue an IntersectionObserverEntry
To queue an IntersectionObserverEntry for an IntersectionObserver
observer, given a document
document; DOMHighResTimeStamp
time; DOMRect
s rootBounds, boundingClientRect, intersectionRect, and isIntersecting flag;
and an Element
target;
run these steps:
-
Construct an
IntersectionObserverEntry
, passing in time, rootBounds, boundingClientRect, intersectionRect, isIntersecting, and target. -
Append it to observer’s internal
[[QueuedEntries]]
slot. -
Queue an intersection observer task for document.
3.2.7. Compute the Intersection of a Target Element and the Root
To compute the intersection between a target and the observer’s intersection root, run these steps:
-
Let intersectionRect be the result of running the
getBoundingClientRect()
algorithm on the target. -
Let container be the containing block of the target.
-
While container is not the intersection root:
-
If container is the
document
of a nested browsing context, update intersectionRect by clipping to the viewport of thedocument
, and update container to be the browsing context container of container. -
Map intersectionRect to the coordinate space of container.
-
If container has overflow clipping or a css clip-path property, update intersectionRect by applying container’s clip.
-
If container is the root element of a browsing context, update container to be the browsing context’s
document
; otherwise, update container to be the containing block of container.
-
-
Map intersectionRect to the coordinate space of the intersection root.
-
Update intersectionRect by intersecting it with the root intersection rectangle.
-
Map intersectionRect to the coordinate space of the viewport of the
document
containing the target. -
Return intersectionRect.
3.2.8. Run the Update Intersection Observations Steps
To run the update intersection observations steps for a document
document given a timestamp time, run these steps:
-
Let observer list be a list of all
IntersectionObserver
s whoseroot
is in the DOM tree of document. For the top-level browsing context, this includes implicit root observers. -
For each observer in observer list:
-
Let rootBounds be observer’s root intersection rectangle.
-
For each target in observer’s internal
[[ObservationTargets]]
slot, processed in the same order thatobserve()
was called on each target:-
Let:
-
thresholdIndex be 0.
-
isIntersecting be false.
-
targetRect be a
DOMRectReadOnly
with x, y, width, and height set to 0. -
intersectionRect be a
DOMRectReadOnly
with x, y, width, and height set to 0.
-
-
If the intersection root is not the implicit root, and target is not in the same
document
as the intersection root, skip to step 11. -
If the intersection root is an
Element
, and target is not a descendant of the intersection root in the containing block chain, skip to step 11. -
Set targetRect to the
DOMRectReadOnly
obtained by running thegetBoundingClientRect()
algorithm on target. -
Set intersectionRect to the result of running the compute the intersection algorithm on target.
-
Let targetArea be targetRect’s area.
-
Let intersectionArea be intersectionRect’s area.
-
Set isIntersecting to true if targetRect and rootBounds intersect or are edge-adjacent, even if the intersection has zero area (because rootBounds or targetRect have zero area).
-
If targetArea is non-zero, let intersectionRatio be intersectionArea divided by targetArea.
Otherwise, let intersectionRatio be1
if isIntersecting is true, or0
if isIntersecting is false. -
Set thresholdIndex to the index of the first entry in observer.
thresholds
whose value is greater than intersectionRatio, or the length of observer.thresholds
if intersectionRatio is greater than or equal to the last entry in observer.thresholds
. -
Let intersectionObserverRegistration be the
IntersectionObserverRegistration
record in target’s internal[[RegisteredIntersectionObservers]]
slot whoseobserver
property is equal to observer. -
Let previousThresholdIndex be the intersectionObserverRegistration’s
previousThresholdIndex
property. -
Let previousIsIntersecting be the intersectionObserverRegistration’s
previousIsIntersecting
property. -
If thresholdIndex does not equal previousThresholdIndex or if isIntersecting does not equal previousIsIntersecting, queue an IntersectionObserverEntry, passing in observer, time, rootBounds, targetRect, intersectionRect, isIntersecting, and target.
-
Assign thresholdIndex to intersectionObserverRegistration’s
previousThresholdIndex
property. -
Assign isIntersecting to intersectionObserverRegistration’s
previousIsIntersecting
property.
-
-
3.3. IntersectionObserver Lifetime
An IntersectionObserver
will remain alive until both of these conditions hold:
- There are no scripting references to the observer.
- The observer is not observing any targets.
An IntersectionObserver
will continue observing a target until either the observer’s unobserve()
method is called with the target as argument; or the observer’s disconnect()
is called.
3.4. External Spec Integrations
3.4.1. HTML Processing Model: Event Loop
An Intersection Observer processing step should take place during the "Update the rendering" steps, after step 12, run the animation frame callbacks, in the in the HTML Processing Model.
This step is:
- For each fully active
document
in docs, Run the update intersection observations steps for thatdocument
, passing in now as the timestamp.
3.4.2. Pending initial IntersectionObserver targets
Adocument
is said to have pending initial IntersectionObserver targets if there is at least one IntersectionObserver
meeting these criteria:
- The observer’s
root
is in the document (for the top-level browsing context, this includes implicit root observers). - The observer has at least one target in its
[[ObservationTargets]]
slot for which noIntersectionObserverEntry
has yet been queued.
In the HTML Processing Model, under the "Update the rendering" step, the "Unnecessary rendering" step should be modified to add an additional requirement for skipping the rendering update:
- The document does not have pending initial IntersectionObserver targets.
4. Accessibility Considerations
*This section is non-normative.*
There are no known accessibility considerations for the core IntersectionObserver specification (this document). There are, however, related specifications and proposals that leverage and refer to this spec, which might have their own accessibility considerations. In particular, specifications for HTML 5 §2.6.7 Lazy loading attributes and CSS Containment 2 §4 Suppressing An Element’s Contents Entirely: the content-visibility property may have implications for HTML 5 §6.8 Find-in-page, HTML 5 §6.5.3 The tabindex attribute, and spatial navigation.
5. Privacy and Security
*This section is non-normative.*
The main privacy concerns associated with this API relate to the information it may provide to code running in the context of a cross-origin iframe (i.e., the cross-origin-domain target case). In particular:
-
There is no universal consensus on the privacy implications of revealing whether an iframe is within the global viewport.
-
There is a risk that the API may be used to probe for information about the geometry of the global viewport itself, which may be used to deduce the user’s hardware configuration. The motivation for disabling the effects of
rootMargin
and suppressingrootBounds
for cross-origin-domain targets is to prevent such probing.
It should be noted that prior to IntersectionObserver
, web developers
used other API’s in very ingenious (and grotesque) ways to tease out the information
available from IntersectionObserver
. As a purely practical matter, this API
does not reveal any information that was not already available by other means.
Another consideration is that IntersectionObserver
uses DOMHighResTimeStamp
,
which has privacy and security considerations of its own. It is however unlikely that IntersectionObserver
is vulnerable to timing-related exploits. Timestamps are generated
at most once per rendering update (see § 3.4.1 HTML Processing Model: Event Loop), which is far too
infrequent for the familiar kind of timing attack.
6. Acknowledgements
Special thanks to all the contributors for their technical input and suggestions that led to improvements to this specification.