Open LoganDark opened 3 weeks ago
@react-spring/web
@react-spring/three
@react-spring/native
@react-spring/konva
@react-spring/zdog
9.7.3
useResize returns the size of the content box, without padding or borders. It should use the border box instead.
useResize
https://github.com/pmndrs/react-spring/blob/1e4406e322f878141718737638bb6e96e717dd63/packages/shared/src/dom-events/resize/resizeElement.ts#L42-L44
- if (observer) { - observer.observe(target) - } + observer?.observe(target, { box: 'border-box' })
https://github.com/pmndrs/react-spring/blob/1e4406e322f878141718737638bb6e96e717dd63/packages/shared/src/dom-events/resize/resizeElement.ts#L7-L10
const handleObservation = (entries: ResizeObserverEntry[]) => - entries.forEach(({ target, contentRect }) => { - return resizeHandlers.get(target)?.forEach(handler => handler(contentRect)) + entries.forEach(({ target, borderBoxSize }) => { + const handlers = resizeHandlers.get(target) + if (!handlers) return + const { blockSize, inlineSize } = borderBoxSize[0] + const { width, height } = !getComputedStyle(target).getPropertyValue('writing-mode')?.startsWith('vertical-') + ? { width: inlineSize, height: blockSize } + : { width: blockSize, height: inlineSize } + for (const handler of handlers) handler({ width, height }) })
MDN
observe an element that has padding.
padding should be included in the returned size.
https://codesandbox.io/p/sandbox/muddy-hill-sjfzwl
Which react-spring target are you using?
@react-spring/web
@react-spring/three
@react-spring/native
@react-spring/konva
@react-spring/zdog
What version of react-spring are you using?
9.7.3
What's Wrong?
useResize
returns the size of the content box, without padding or borders. It should use the border box instead.https://github.com/pmndrs/react-spring/blob/1e4406e322f878141718737638bb6e96e717dd63/packages/shared/src/dom-events/resize/resizeElement.ts#L42-L44
https://github.com/pmndrs/react-spring/blob/1e4406e322f878141718737638bb6e96e717dd63/packages/shared/src/dom-events/resize/resizeElement.ts#L7-L10
MDN
To Reproduce
observe an element that has padding.
Expected Behaviour
padding should be included in the returned size.
Link to repo
https://codesandbox.io/p/sandbox/muddy-hill-sjfzwl