diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index cd732301151..da9911834d8 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/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 (
{(renderProps) => (
<>
-
:not([slot=icon], [slot=avatar], [slot=label]) {display: none;}')}>
+ :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
{({selectedItems, defaultChildren}) => {
return (
;
+ return ;
}
const columnStyles = style({
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
index b945860c127..e5685f6b536 100644
--- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -153,17 +153,17 @@ export const WithAvatars: Story = {
- User One
+ User One
user.one@example.com
- User Two
+ User Two
user.two@example.com
123-456-7890
- User Three
+ User Three
),
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index a4b5e75e74c..90454456369 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/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 (