fix: Height of modal underlay is incorrect when the body has height: 100% (#8958)

* fix: Height of modal underlay is incorrect when the body has height: 100%

* Turn on verdaccio

* Maybe more accurate fractional height

* Revert "Turn on verdaccio"

This reverts commit 5420894.

* No undefinedpx

* Revert "Revert "Turn on verdaccio""

This reverts commit 21740c3.

* Revert "Revert "Revert "Turn on verdaccio"""

This reverts commit 42cb451.

---------

Co-authored-by: Daniel Lu <[email protected]>

Author: devongovett

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {isScrollable} from '@react-aria/utils';
 import React, {JSX} from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
@@ -20,12 +21,20 @@ interface UnderlayProps {
 }
 
 export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
+  let pageHeight: number | undefined = undefined;
+  if (typeof document !== 'undefined') {
+    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
+    // Prevent Firefox from adding scrollbars when the page has a fractional height.
+    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   return (
     <div
       data-testid="underlay"
       {...otherProps}
       // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: typeof document !== 'undefined' ? document.body.getBoundingClientRect().height : undefined}}
+      style={{height: pageHeight}}
       className={classNames(underlayStyles, 'spectrum-Underlay', {
         'is-open': isOpen,
         'spectrum-Underlay--transparent': isTransparent

packages/react-aria-components/src/Modal.tsx

@@ -13,7 +13,7 @@
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
+import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
@@ -171,10 +171,18 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   });
 
   let viewport = useViewportSize();
+  let pageHeight: number | undefined = undefined;
+  if (typeof document !== 'undefined') {
+    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
+    // Prevent Firefox from adding scrollbars when the page has a fractional height.
+    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   let style = {
     ...renderProps.style,
     '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined
+    '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
   };
 
   return (