fix (react-dialog): Use consistent rounding for clientHeight and inne…

…rHeight (#32480)
microsoft · Sep 10, 2024 · 01cacb0 · 01cacb0
1 parent e98c6f0
commit 01cacb0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/change/@fluentui-react-dialog-a4232c34-ea7b-4222-a164-74574abfa9e1.json b/change/@fluentui-react-dialog-a4232c34-ea7b-4222-a164-74574abfa9e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Adjust window height comparison in fractional cases.",
+  "packageName": "@fluentui/react-dialog",
+  "email": "owcampbe@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-dialog/library/src/utils/useDisableBodyScroll.ts b/packages/react-components/react-dialog/library/src/utils/useDisableBodyScroll.ts
@@ -20,7 +20,9 @@ export function useDisableBodyScroll(): {
       return;
     }
     const isHorizontalScrollbarVisible =
-      targetDocument.body.clientHeight > (targetDocument.defaultView?.innerHeight ?? 0);
+      // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.
+      // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.
+      Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);
     if (!isHorizontalScrollbarVisible) {
       return;
     }