fix(shared): report border-box dimensions from useResize (#2432)

Author: joshuaellis

.changeset/use-resize-border-box.md

@@ -0,0 +1,5 @@
+---
+'@react-spring/shared': patch
+---
+
+fix: `useResize` now reports border-box dimensions (includes padding and border)

packages/shared/src/dom-events/resize/resizeElement.test.ts

@@ -0,0 +1,46 @@
+import { resizeElement } from './resizeElement'
+
+describe('resizeElement', () => {
+  beforeEach(() => {
+    vi.useRealTimers()
+  })
+
+  const observeOnce = (target: HTMLElement) =>
+    new Promise<{ width: number; height: number }>(resolve => {
+      const cleanup = resizeElement(rect => {
+        cleanup()
+        resolve({ width: rect.width, height: rect.height })
+      }, target)
+    })
+
+  it('reports the border-box size, including padding and border', async () => {
+    const target = document.createElement('div')
+    target.style.cssText =
+      'width: 100px; height: 100px; padding: 20px; border: 5px solid; box-sizing: content-box;'
+    document.body.appendChild(target)
+
+    try {
+      const size = await observeOnce(target)
+
+      // content-box 100x100 + padding 20 + border 5 = border-box 150x150
+      expect(size).toEqual({ width: 150, height: 150 })
+    } finally {
+      target.remove()
+    }
+  })
+
+  it('maps inline/block to width/height for vertical writing modes', async () => {
+    const target = document.createElement('div')
+    target.style.cssText =
+      'width: 100px; height: 200px; writing-mode: vertical-rl; box-sizing: border-box;'
+    document.body.appendChild(target)
+
+    try {
+      const size = await observeOnce(target)
+
+      expect(size).toEqual({ width: 100, height: 200 })
+    } finally {
+      target.remove()
+    }
+  })
+})

packages/shared/src/dom-events/resize/resizeElement.ts

@@ -4,9 +4,33 @@ let observer: ResizeObserver | undefined
 
 const resizeHandlers = new WeakMap<Element, Set<OnResizeCallback>>()
 
+const getBorderBoxSize = (entry: ResizeObserverEntry) => {
+  // `borderBoxSize` is an array in modern browsers and a plain object in
+  // older Firefox; both expose `inlineSize`/`blockSize`. Fall back to
+  // `contentRect` when the entry doesn't carry border-box data.
+  const boxSize = Array.isArray(entry.borderBoxSize)
+    ? entry.borderBoxSize[0]
+    : (entry.borderBoxSize as unknown as ResizeObserverSize | undefined)
+
+  if (!boxSize) return entry.contentRect
+
+  // `contentRect` always reports visual width/height regardless of writing
+  // mode; `inlineSize`/`blockSize` are logical, so flip them back for
+  // vertical/sideways writing modes to keep the public shape consistent.
+  const writingMode = getComputedStyle(entry.target).writingMode
+  const isVertical =
+    writingMode.startsWith('vertical-') || writingMode.startsWith('sideways-')
+
+  return isVertical
+    ? { width: boxSize.blockSize, height: boxSize.inlineSize }
+    : { width: boxSize.inlineSize, height: boxSize.blockSize }
+}
+
 const handleObservation = (entries: ResizeObserverEntry[]) =>
-  entries.forEach(({ target, contentRect }) => {
-    return resizeHandlers.get(target)?.forEach(handler => handler(contentRect))
+  entries.forEach(entry => {
+    return resizeHandlers
+      .get(entry.target)
+      ?.forEach(handler => handler(getBorderBoxSize(entry)))
   })
 
 export function resizeElement(handler: OnResizeCallback, target: HTMLElement) {
@@ -40,7 +64,7 @@ export function resizeElement(handler: OnResizeCallback, target: HTMLElement) {
   elementHandlers.add(handler)
 
   if (observer) {
-    observer.observe(target)
+    observer.observe(target, { box: 'border-box' })
   }
 
   /**