Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 2, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4954b1
fix: Height of modal underlay is incorrect when the body has height: …
devongovett Oct 2, 2025
5420894
Turn on verdaccio
devongovett Oct 2, 2025
8ffa764
Maybe more accurate fractional height
devongovett Oct 2, 2025
21740c3
Revert "Turn on verdaccio"
devongovett Oct 2, 2025
5d0ff81
No undefinedpx
devongovett Oct 2, 2025
42cb451
Revert "Revert "Turn on verdaccio""
LFDanLu Oct 2, 2025
a4f2ff8
Revert "Revert "Revert "Turn on verdaccio"""
LFDanLu Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/@react-spectrum/overlays/src/Underlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there's another way to get the scrollHeight but not rounded?

}

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
Expand Down
12 changes: 10 additions & 2 deletions packages/react-aria-components/src/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
Expand Down