From 81ddd859487710c40afea7c6df357d5737bb6826 Mon Sep 17 00:00:00 2001
From: Yechao Li <liyechao@yechao.xyz>
Date: Mon, 19 Feb 2024 09:25:16 +0800
Subject: [PATCH 1/3] fix: use `getBoundingClientRect` to get the exact size

---
 .../hooks/src/useSize/__tests__/index.test.tsx     |  8 +++++---
 packages/hooks/src/useSize/index.ts                | 14 ++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/hooks/src/useSize/__tests__/index.test.tsx b/packages/hooks/src/useSize/__tests__/index.test.tsx
index a7458da33c..0762b911bd 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: () => ({
+              clientWidth: 100,
+              clientHeight: 50,
+            }),
           },
         },
       ]);
diff --git a/packages/hooks/src/useSize/index.ts b/packages/hooks/src/useSize/index.ts
index 20a3de66a5..fd4fdfcfab 100644
--- a/packages/hooks/src/useSize/index.ts
+++ b/packages/hooks/src/useSize/index.ts
@@ -7,12 +7,10 @@ import useIsomorphicLayoutEffectWithTarget from '../utils/useIsomorphicLayoutEff
 type Size = { width: number; height: number };
 
 function useSize(target: BasicTarget): Size | undefined {
-  const [state, setState] = useRafState<Size | undefined>(
-    () => {
-      const el = getTargetElement(target);
-      return el ? { width: el.clientWidth, height: el.clientHeight } : undefined
-    },
-  );
+  const [state, setState] = useRafState<Size | undefined>(() => {
+    const el = getTargetElement(target);
+    return el ? { width: el.clientWidth, height: el.clientHeight } : undefined;
+  });
 
   useIsomorphicLayoutEffectWithTarget(
     () => {
@@ -24,8 +22,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);

From 805a734b1e78e15d2146cdfe9cf033bead32b3bc Mon Sep 17 00:00:00 2001
From: Yechao Li <liyechao@yechao.xyz>
Date: Tue, 20 Feb 2024 13:35:34 +0800
Subject: [PATCH 2/3] test: fix test error

---
 packages/hooks/src/useSize/__tests__/index.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/hooks/src/useSize/__tests__/index.test.tsx b/packages/hooks/src/useSize/__tests__/index.test.tsx
index 0762b911bd..1ce1979dbf 100644
--- a/packages/hooks/src/useSize/__tests__/index.test.tsx
+++ b/packages/hooks/src/useSize/__tests__/index.test.tsx
@@ -71,8 +71,8 @@ describe('useSize', () => {
         {
           target: {
             getBoundingClientRect: () => ({
-              clientWidth: 100,
-              clientHeight: 50,
+              width: 100,
+              height: 50,
             }),
           },
         },

From 81fd81932cb07c4deb4a7439e5451abcba59f426 Mon Sep 17 00:00:00 2001
From: Yechao Li <liyechao@yechao.xyz>
Date: Tue, 20 Feb 2024 13:38:39 +0800
Subject: [PATCH 3/3] fix: initialize size from bounding client rect

---
 packages/hooks/src/useSize/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/hooks/src/useSize/index.ts b/packages/hooks/src/useSize/index.ts
index fd4fdfcfab..f9e931058c 100644
--- a/packages/hooks/src/useSize/index.ts
+++ b/packages/hooks/src/useSize/index.ts
@@ -9,7 +9,8 @@ type Size = { width: number; height: number };
 function useSize(target: BasicTarget): Size | undefined {
   const [state, setState] = useRafState<Size | undefined>(() => {
     const el = getTargetElement(target);
-    return el ? { width: el.clientWidth, height: el.clientHeight } : undefined;
+    const rect = el?.getBoundingClientRect();
+    return rect ? { width: rect.width, height: rect.height } : undefined;
   });
 
   useIsomorphicLayoutEffectWithTarget(