diff --git a/packages/hooks/src/useSize/__tests__/index.test.tsx b/packages/hooks/src/useSize/__tests__/index.test.tsx index a7458da33c..1ce1979dbf 100644 --- a/packages/hooks/src/useSize/__tests__/index.test.tsx +++ b/packages/hooks/src/useSize/__tests__/index.test.tsx @@ -44,7 +44,7 @@ describe('useSize', () => { expect(await screen.findByText(/^width/)).toHaveTextContent('width: undefined'); expect(await screen.findByText(/^height/)).toHaveTextContent('height: undefined'); - act(() => callback([{ target: { clientWidth: 10, clientHeight: 10 } }])); + act(() => callback([{ target: { getBoundingClientRect: () => ({ width: 10, height: 10 }) } }])); expect(await screen.findByText(/^width/)).toHaveTextContent('width: 10'); expect(await screen.findByText(/^height/)).toHaveTextContent('height: 10'); mockRaf.mockRestore(); @@ -70,8 +70,10 @@ describe('useSize', () => { callback([ { target: { - clientWidth: 100, - clientHeight: 50, + getBoundingClientRect: () => ({ + width: 100, + height: 50, + }), }, }, ]); diff --git a/packages/hooks/src/useSize/index.ts b/packages/hooks/src/useSize/index.ts index 20a3de66a5..f9e931058c 100644 --- a/packages/hooks/src/useSize/index.ts +++ b/packages/hooks/src/useSize/index.ts @@ -7,12 +7,11 @@ import useIsomorphicLayoutEffectWithTarget from '../utils/useIsomorphicLayoutEff type Size = { width: number; height: number }; function useSize(target: BasicTarget): Size | undefined { - const [state, setState] = useRafState( - () => { - const el = getTargetElement(target); - return el ? { width: el.clientWidth, height: el.clientHeight } : undefined - }, - ); + const [state, setState] = useRafState(() => { + const el = getTargetElement(target); + const rect = el?.getBoundingClientRect(); + return rect ? { width: rect.width, height: rect.height } : undefined; + }); useIsomorphicLayoutEffectWithTarget( () => { @@ -24,8 +23,8 @@ function useSize(target: BasicTarget): Size | undefined { const resizeObserver = new ResizeObserver((entries) => { entries.forEach((entry) => { - const { clientWidth, clientHeight } = entry.target; - setState({ width: clientWidth, height: clientHeight }); + const { width, height } = entry.target.getBoundingClientRect(); + setState({ width, height }); }); }); resizeObserver.observe(el);