Bug: `useElementRect` doesn't accurately reflect an element's position

[znicholasbrown]

The useElementRect composition currently uses a ResizeObserver to track changes to an element; however, ResizeObserver doesn't fire events for viewport or parent changes that modify the element's scroll attributes (like scrollHeight, scrollTop, etc). This issue results in a discrepancy between the element's runtime bounding box and the observed bounding box if the document or any of the element's parents have scrolled.

We could potentially listen to all scroll events in the document and making subsequent calls to getBoundingClientRect but this would be pretty expensive. SO suggests a MutationObserver could be another option, but it's unclear if this is the intended behavior according to the API.

A few suggestions:

• rename useElementRect to useElementSize and refactored to return only width and height properties, which can be accurately observed
  or
• find a solution that would allow us to performantly track changes to the element rect

Potential resources:
https://github.com/reach/observe-rect
https://discourse.wicg.io/t/idea-clientrectobserver/6095 (this would do exactly what we hope if it gets accepted)