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)
The
useElementRectcomposition currently uses aResizeObserverto track changes to an element; however,ResizeObserverdoesn'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
getBoundingClientRectbut this would be pretty expensive. SO suggests aMutationObservercould be another option, but it's unclear if this is the intended behavior according to the API.A few suggestions:
useElementRecttouseElementSizeand refactored to return only width and height properties, which can be accurately observedor
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)