From 1b132d70a6b1208b86f0a810cc5ef41fae8f13a1 Mon Sep 17 00:00:00 2001
From: cyeet <cyeet@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:38:41 +0000
Subject: [PATCH] Fix dialog background layout shift

---
 packages/react/src/Dialog/Dialog.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 0152906ada3..5f759eeb72a 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -475,18 +475,26 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
   )
 
   React.useEffect(() => {
-    const bodyOverflowStyle = document.body.style.overflow || ''
-    // If the body is already set to overflow: hidden, it likely means
+    const {body, documentElement} = document
+    let {scrollTop} = documentElement
+    const bodyOverflowStyle = body.style.overflowY || ''
+
+    // If the body is already set to scroll, it likely means
     // that there is already a modal open. In that case, we should bail
     // so we don't re-enable scroll after the second dialog is closed.
-    if (bodyOverflowStyle === 'hidden') {
+    if (bodyOverflowStyle === 'scroll') {
       return
     }
 
-    document.body.style.overflow = 'hidden'
+    scrollTop = documentElement.scrollTop
+    body.style.top = `-${scrollTop}px`
+    body.style.position = 'fixed'
+    body.style.overflowY = 'scroll'
 
     return () => {
-      document.body.style.overflow = bodyOverflowStyle
+      documentElement.scrollTop = scrollTop
+      body.style.position = 'static'
+      body.style.overflowY = 'auto'
     }
   }, [])