[useResizeObserver] Use border-box instead of content-box

Question

[useResizeObserver] Use border-box instead of content-box

bhollis opened this issue 3 years ago · 4 comments

Is your feature request related to a problem? Please describe.

getBoundingClientRect returns the border-box, which includes padding and borders. However by default ResizeObserver.observe uses the content-box, which does not. This renders the example for useResizeObserver incorrect as it'll set the size with padding, then update to the size without padding. useSize avoids this by using offsetWidth and offsetHeight.

Describe the solution you'd like

Either pass the content-box option to ResizeObserver.observe, or change the example in the README to not use getBoundingClientRect.

Describe alternatives you've considered
I just switched to reading offsetHeight like useSize does.

Answer 1 · 2021-09-01T14:30:45.000Z

afaik border-box is experimental and not widely supported. if you can show me something showing it has wide support, by all means.

Answer 2 · 2021-09-01T15:08:25.000Z

If ResizeObserver.observe's options parameter is not widely supported, then the solution would be to update the example in the README to use offsetWidth and offsetHeight instead of getBoundingContentRect.

Answer 3 · 2021-09-10T20:04:47.000Z

feel free to update the README, I personally see nothing inaccurate about it.

Answer 4 · 2022-03-05T23:45:18.000Z

@bhollis is right, the example uses the BoundingClientRect (border-box) for the initial size and later on the resize handler it uses the contentRect (content-box)