Let’s say I get a DOMRect object from calling .getBoundingClientRect on an element:
let domRect = el.getBoundingClientRect();
If I keep this object around and the bounding rectangle of el changes (for example because its contents are updated, or because the user scrolls), which of the following is true?
- The
domRectobject reflects the new bounds ofel. That is, it’s a live view of the state of the DOM. Or: - The
domRectobject reflects the original bounds ofel. That is, it’s an immutable snapshot of whenel.getBoundingClientRect()was called.
4
The DOMRect object returned by el.getBoundingClientRect() is an immutable snapshot of the element’s state at the exact time that .getBoundingClientRect() was called. It does not subsequently get updated by the browser, even if the page’s layout changes of the user scrolls.
Here’s a CodePen to test this.
The relevant spec is CSSOM View Module, which says (thanks @CBroe for finding this):
NOTE: The
DOMRectobject returned bygetBoundingClientRect()is not live.