fix(getViewportRect): account for scrollbar-gutter: stable space (#3387)

atomiks · web-flow · commit 8b34295b6610 · 2025-08-21T16:18:16.000+10:00
diff --git a/.changeset/sour-numbers-press.md b/.changeset/sour-numbers-press.md
@@ -0,0 +1,5 @@
+---
+'@floating-ui/dom': patch
+---
+
+fix(getViewportRect): account for space left by `scrollbar-gutter: stable`
diff --git a/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts b/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts
@@ -55,7 +55,7 @@ export function convertOffsetParentRelativeRectToViewportRelativeRect({
 
   const htmlOffset =
     documentElement && !isOffsetParentAnElement && !isFixed
-      ? getHTMLOffset(documentElement, scroll, true)
+      ? getHTMLOffset(documentElement, scroll)
       : createCoords(0);
 
   return {
diff --git a/packages/dom/src/utils/getHTMLOffset.ts b/packages/dom/src/utils/getHTMLOffset.ts
@@ -4,16 +4,12 @@ import {getWindowScrollBarX} from './getWindowScrollBarX';
 export function getHTMLOffset(
   documentElement: HTMLElement,
   scroll: NodeScroll,
-  ignoreScrollbarX = false,
 ) {
   const htmlRect = documentElement.getBoundingClientRect();
   const x =
     htmlRect.left +
     scroll.scrollLeft -
-    (ignoreScrollbarX
-      ? 0
-      : // RTL <body> scrollbar.
-        getWindowScrollBarX(documentElement, htmlRect));
+    getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
 
   return {
diff --git a/packages/dom/src/utils/getViewportRect.ts b/packages/dom/src/utils/getViewportRect.ts
@@ -2,6 +2,12 @@ import type {Rect, Strategy} from '@floating-ui/core';
 import {getWindow, isWebKit} from '@floating-ui/utils/dom';
 
 import {getDocumentElement} from '../platform/getDocumentElement';
+import {getWindowScrollBarX} from './getWindowScrollBarX';
+
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 
 export function getViewportRect(element: Element, strategy: Strategy): Rect {
   const win = getWindow(element);
@@ -25,6 +31,32 @@ export function getViewportRect(element: Element, strategy: Strategy): Rect {
     }
   }
 
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline =
+      doc.compatMode === 'CSS1Compat'
+        ? parseFloat(bodyStyles.marginLeft) +
+            parseFloat(bodyStyles.marginRight) || 0
+        : 0;
+    const clippingStableScrollbarWidth = Math.abs(
+      html.clientWidth - body.clientWidth - bodyMarginInline,
+    );
+
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
+
   return {
     width,
     height,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@floating-ui/dom': patch
 +---
++
 +fix(getViewportRect): account for space left by `scrollbar-gutter: stable`