diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index 1d72775097a..ee05a107a03 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -79,7 +79,12 @@ export {
   useLoadMoreSentinel as UNSTABLE_useLoadMoreSentinel
 } from 'react-aria/private/utils/useLoadMoreSentinel';
 export {inertValue} from 'react-aria/private/utils/inertValue';
-export {isCtrlKeyPressed, willOpenKeyboard} from 'react-aria/private/utils/keyboard';
+export {
+  isCtrlKeyPressed,
+  isKeyboardOpen,
+  isKeyboardVisible,
+  willOpenKeyboard
+} from 'react-aria/private/utils/isKeyboardVisible';
 export {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 export {isFocusable, isTabbable} from 'react-aria/private/utils/isFocusable';
 export {getNonce} from 'react-aria/private/utils/getNonce';
diff --git a/packages/@react-types/shared/src/events.d.ts b/packages/@react-types/shared/src/events.d.ts
index 6b98068cd24..628ea1258b0 100644
--- a/packages/@react-types/shared/src/events.d.ts
+++ b/packages/@react-types/shared/src/events.d.ts
@@ -13,6 +13,20 @@
 import {FocusableElement} from './dom';
 import {FocusEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, SyntheticEvent} from 'react';
 
+// Type helper to extract the target element type from an event
+export type EventTargetType<T> = T extends SyntheticEvent<infer E, any> ? E : EventTarget;
+
+// Type helper to extract the event map from a target
+export type EventMapType<T extends EventTarget> = T extends Window
+  ? WindowEventMap
+  : T extends Document
+    ? DocumentEventMap
+    : T extends Element
+      ? HTMLElementEventMap
+      : T extends VisualViewport
+        ? VisualViewportEventMap
+        : GlobalEventHandlersEventMap;
+
 // Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
 // is not to propagate. This can be overridden by calling continuePropagation() on the event.
 export type BaseEvent<T extends SyntheticEvent> = T & {
diff --git a/packages/dev/docs/pages/react-aria/getting-started.mdx b/packages/dev/docs/pages/react-aria/getting-started.mdx
index e7a3eb88af8..f94e5fba948 100644
--- a/packages/dev/docs/pages/react-aria/getting-started.mdx
+++ b/packages/dev/docs/pages/react-aria/getting-started.mdx
@@ -193,6 +193,10 @@ This is a quick way to get started, but you can also create your own custom clas
     --origin: translateY(-8px);
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: slide 200ms;
   }
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index c1fdf6b6a87..c3b9a2248a0 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -787,7 +787,7 @@ function PlantModal(props: ModalOverlayProps) {
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
-      {({isEntering, isExiting}) => (
+      {({isEntering, isExiting, isOpen}) => (
         <>
           {/* Inner position: sticky div sized to the visual viewport
             height so the modal appears in view.
@@ -799,6 +799,7 @@ function PlantModal(props: ModalOverlayProps) {
               <div
                 data-react-aria-top-layer="true"
                 className={`absolute top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
+                ${!isOpen ? 'opacity-0' : ''}
                 ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
                 ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
               `}>
diff --git a/packages/react-aria-components/docs/Modal.mdx b/packages/react-aria-components/docs/Modal.mdx
index d17bd684aad..ed45d8282cc 100644
--- a/packages/react-aria-components/docs/Modal.mdx
+++ b/packages/react-aria-components/docs/Modal.mdx
@@ -111,6 +111,10 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
   width: max-content;
   max-width: 300px;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
diff --git a/packages/react-aria-components/docs/Popover.mdx b/packages/react-aria-components/docs/Popover.mdx
index 6fda2d02268..d648c8bbcca 100644
--- a/packages/react-aria-components/docs/Popover.mdx
+++ b/packages/react-aria-components/docs/Popover.mdx
@@ -100,6 +100,10 @@ import {DialogTrigger, Popover, Dialog, Button, OverlayArrow, Heading, Switch} f
     stroke-width: 1px;
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     transform: var(--starting-scale) var(--origin);
@@ -447,6 +451,10 @@ Popovers also support entry and exit animations via states exposed as data attri
   transition: opacity 300ms, scale 300ms;
   transform-origin: var(--trigger-anchor-point);
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     opacity: 0;
diff --git a/packages/react-aria-components/docs/examples/command-palette.mdx b/packages/react-aria-components/docs/examples/command-palette.mdx
index 7f737fda4f4..331ec6a883b 100644
--- a/packages/react-aria-components/docs/examples/command-palette.mdx
+++ b/packages/react-aria-components/docs/examples/command-palette.mdx
@@ -108,7 +108,8 @@ function CommandPaletteExample() {
         >
           <div className="sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-start sm:items-center justify-center p-4 box-border text-center">
             <Modal
-              className={({ isEntering, isExiting }) => `
+              className={({ isEntering, isExiting, isOpen }) => `
+              ${!isOpen ? 'opacity-0' : ''}
               ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
               ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
             `}
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index af2ca11b8bc..94978b9c46c 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -50,8 +50,9 @@ function ModalExample() {
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
           ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
         `}>
-          <Modal className={({isEntering, isExiting}) => `
+          <Modal className={({isEntering, isExiting, isOpen}) => `
             sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center
+            ${!isOpen ? 'opacity-0' : ''}
             ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
             ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
           `}>
diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx
index b78753b7043..f83d33e46fd 100644
--- a/packages/react-aria-components/docs/styling.mdx
+++ b/packages/react-aria-components/docs/styling.mdx
@@ -281,6 +281,10 @@ Overlay components such as [Popover](Popover.html) and [Modal](Modal.html) suppo
 .react-aria-Popover {
   transition: opacity 300ms;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     opacity: 0;
@@ -295,6 +299,10 @@ Note that the `[data-entering]` state is only applied for one frame when using C
   /* entry transition */
   transition: transform 300ms, opacity 300ms;
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   /* starting state of the entry transition */
   &[data-entering] {
     opacity: 0;
@@ -315,6 +323,10 @@ Note that the `[data-entering]` state is only applied for one frame when using C
 For more complex animations, you can also apply CSS keyframe animations using the same `[data-entering]` and `[data-exiting]` states.
 
 ```css render=false
+.react-aria-Popover:not([data-open]) {
+  opacity: 0;
+}
+
 .react-aria-Popover[data-entering] {
   animation: slide 300ms;
 }
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index ecde2ec2385..10c04671661 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -11,7 +11,6 @@
  */
 
 import {AriaModalOverlayProps, useModalOverlay} from 'react-aria/useModalOverlay';
-
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -34,9 +33,19 @@ import {
   useOverlayTriggerState
 } from 'react-stately/useOverlayTriggerState';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
+import React, {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsSSR} from 'react-aria/SSRProvider';
+import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useObjectRef} from 'react-aria/useObjectRef';
 import {useViewportSize} from 'react-aria/private/utils/useViewportSize';
 
@@ -75,6 +84,7 @@ export interface ModalOverlayProps
 interface InternalModalContextValue {
   modalProps: DOMAttributes;
   modalRef: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
   isExiting: boolean;
   isDismissable?: boolean;
 }
@@ -83,6 +93,12 @@ export const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDi
 const InternalModalContext = createContext<InternalModalContextValue | null>(null);
 
 export interface ModalRenderProps {
+  /**
+   * Whether the modal is ready to be displayed. Use this to avoid layout shift.
+   *
+   * @selector [data-open]
+   */
+  isOpen: boolean;
   /**
    * Whether the modal is currently entering. Use this to apply animations.
    *
@@ -229,11 +245,13 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   let {state} = props;
   let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);
 
-  let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;
+  let [isOpen, setIsOpen] = useState(false);
+  let entering = useEnterAnimation(props.overlayRef, isOpen) || props.isEntering || false;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-ModalOverlay',
     values: {
+      isOpen,
       isEntering: entering,
       isExiting: props.isExiting,
       state
@@ -262,6 +280,10 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
     '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
   };
 
+  // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
+  // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
+  useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);
+
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
       <dom.div
@@ -269,13 +291,20 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
         {...renderProps}
         style={style}
         ref={props.overlayRef}
+        data-open={isOpen || undefined}
         data-entering={entering || undefined}
         data-exiting={props.isExiting || undefined}>
         <Provider
           values={[
             [
               InternalModalContext,
-              {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}
+              {
+                modalProps,
+                modalRef,
+                isExiting: props.isExiting,
+                isOpen,
+                isDismissable: props.isDismissable
+              }
             ],
             [OverlayTriggerStateContext, state]
           ]}>
@@ -299,16 +328,17 @@ interface ModalContentProps
 }
 
 function ModalContent(props: ModalContentProps) {
-  let {modalProps, modalRef, isExiting, isDismissable} = useContext(InternalModalContext)!;
+  let {modalProps, modalRef, isExiting, isOpen, isDismissable} = useContext(InternalModalContext)!;
   let state = useContext(OverlayTriggerStateContext)!;
   let mergedRefs = useMemo(() => mergeRefs(props.modalRef, modalRef), [props.modalRef, modalRef]);
 
   let ref = useObjectRef(mergedRefs);
-  let entering = useEnterAnimation(ref);
+  let entering = useEnterAnimation(ref, isOpen);
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Modal',
     values: {
+      isOpen,
       isEntering: entering,
       isExiting,
       state
@@ -320,6 +350,7 @@ function ModalContent(props: ModalContentProps) {
       {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
       {...renderProps}
       ref={ref}
+      data-open={isOpen || undefined}
       data-entering={entering || undefined}
       data-exiting={isExiting || undefined}>
       {isDismissable && <DismissButton onDismiss={state.close} />}
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 8284bdaa844..ee226889e34 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -52,6 +52,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import {runAfterKeyboard} from 'react-aria/private/utils/runAfterKeyboard';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
 import {useIsHidden} from 'react-aria/private/collections/Hidden';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
@@ -125,6 +126,12 @@ export interface PopoverRenderProps {
    * @selector [data-placement="left | right | top | bottom"]
    */
   placement: PlacementAxis | null;
+  /**
+   * Whether the popover is ready to be displayed. Use this to avoid layout shift.
+   *
+   * @selector [data-open]
+   */
+  isOpen: boolean;
   /**
    * Whether the popover is currently entering. Use this to apply animations.
    *
@@ -172,6 +179,7 @@ export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pop
       children = children({
         trigger: props.trigger || null,
         placement: 'bottom',
+        isOpen: false,
         isEntering: false,
         isExiting: false,
         defaultChildren: null
@@ -221,6 +229,9 @@ function PopoverInner({
   let groupCtx = useContext(PopoverGroupContext);
   let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
 
+  let [isOpen, setIsOpen] = useState(false);
+  let [isDialog, setIsDialog] = useState(false);
+
   let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(
     {
       ...props,
@@ -234,13 +245,14 @@ function PopoverInner({
   );
 
   let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
-  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;
+  let isEntering = useEnterAnimation(ref, !!placement && isOpen) || props.isEntering || false;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Popover',
     values: {
       trigger: props.trigger || null,
       placement,
+      isOpen: !!placement && isOpen,
       isEntering,
       isExiting
     }
@@ -249,10 +261,9 @@ function PopoverInner({
   // Automatically render Popover with role=dialog except when isNonModal is true,
   // or a dialog is already nested inside the popover.
   let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
-  let [isDialog, setDialog] = useState(false);
   useLayoutEffect(() => {
     if (ref.current) {
-      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+      setIsDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
     }
   }, [ref, shouldBeDialog]);
 
@@ -301,6 +312,10 @@ function PopoverInner({
     '--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
   };
 
+  // Since an auto-focused input may open the OSK, we defer the reveal, as a courtesy, to avoid layout shift.
+  // TODO: This can cause native focus scroll-into-view to abort, so we might want to do that manually?
+  useLayoutEffect(() => runAfterKeyboard(() => setIsOpen(true)), []);
+
   let overlay = (
     <dom.div
       {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}
@@ -315,6 +330,7 @@ function PopoverInner({
       dir={props.dir}
       data-trigger={props.trigger}
       data-placement={placement}
+      data-open={(!!placement && isOpen) || undefined}
       data-entering={isEntering || undefined}
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}
diff --git a/packages/react-aria/exports/private/utils/isKeyboardVisible.ts b/packages/react-aria/exports/private/utils/isKeyboardVisible.ts
new file mode 100644
index 00000000000..51facdfed85
--- /dev/null
+++ b/packages/react-aria/exports/private/utils/isKeyboardVisible.ts
@@ -0,0 +1,6 @@
+export {
+  isCtrlKeyPressed,
+  isKeyboardOpen,
+  isKeyboardVisible,
+  willOpenKeyboard
+} from '../../../src/utils/isKeyboardVisible';
diff --git a/packages/react-aria/exports/private/utils/keyboard.ts b/packages/react-aria/exports/private/utils/keyboard.ts
index b38151e04cc..51facdfed85 100644
--- a/packages/react-aria/exports/private/utils/keyboard.ts
+++ b/packages/react-aria/exports/private/utils/keyboard.ts
@@ -1 +1,6 @@
-export {isCtrlKeyPressed, willOpenKeyboard} from '../../../src/utils/keyboard';
+export {
+  isCtrlKeyPressed,
+  isKeyboardOpen,
+  isKeyboardVisible,
+  willOpenKeyboard
+} from '../../../src/utils/isKeyboardVisible';
diff --git a/packages/react-aria/exports/private/utils/runAfterKeyboard.ts b/packages/react-aria/exports/private/utils/runAfterKeyboard.ts
new file mode 100644
index 00000000000..f827d09241e
--- /dev/null
+++ b/packages/react-aria/exports/private/utils/runAfterKeyboard.ts
@@ -0,0 +1 @@
+export {runAfterKeyboard, runAfterKeyboardTransition} from '../../../src/utils/runAfterKeyboard';
diff --git a/packages/react-aria/src/autocomplete/useAutocomplete.ts b/packages/react-aria/src/autocomplete/useAutocomplete.ts
index 2254bf93dfb..2f9fa25febc 100644
--- a/packages/react-aria/src/autocomplete/useAutocomplete.ts
+++ b/packages/react-aria/src/autocomplete/useAutocomplete.ts
@@ -38,7 +38,7 @@ import {getInteractionModality, getPointerType} from '../interactions/useFocusVi
 import {getOwnerDocument} from '../utils/domHelpers';
 import intlMessages from '../../intl/autocomplete/*.json';
 import {isAndroid, isIOS} from '../utils/platform';
-import {isCtrlKeyPressed} from '../utils/keyboard';
+import {isCtrlKeyPressed} from '../utils/isKeyboardVisible';
 import {mergeProps} from '../utils/mergeProps';
 import {mergeRefs} from '../utils/mergeRefs';
 import {
diff --git a/packages/react-aria/src/disclosure/useDisclosure.ts b/packages/react-aria/src/disclosure/useDisclosure.ts
index 876c667a770..1f9fbcd5114 100644
--- a/packages/react-aria/src/disclosure/useDisclosure.ts
+++ b/packages/react-aria/src/disclosure/useDisclosure.ts
@@ -70,7 +70,7 @@ export function useDisclosure(
     });
   }, [ref, state]);
 
-  // @ts-ignore https://github.com/facebook/react/pull/24741
+  // https://github.com/facebook/react/pull/24741
   useEvent(ref, 'beforematch', handleBeforeMatch);
 
   let isExpandedRef = useRef<boolean | null>(null);
diff --git a/packages/react-aria/src/overlays/calculatePosition.ts b/packages/react-aria/src/overlays/calculatePosition.ts
index 5c82a9f0f52..00c48dd3920 100644
--- a/packages/react-aria/src/overlays/calculatePosition.ts
+++ b/packages/react-aria/src/overlays/calculatePosition.ts
@@ -337,8 +337,9 @@ function getMaxHeight(
     (position.top != null
       ? position.top
       : containerDimensions[TOTAL_SIZE.height] - (position.bottom ?? 0) - overlayHeight) -
-    (containerDimensions.scroll.top ?? 0);
-  // calculate the dimentions of the "boundingRect" which is most restrictive top/bottom of the boundaryRect and the visual view port
+    (containerDimensions.scroll.top ?? 0) +
+    (visualViewport?.offsetTop ?? 0);
+  // calculate the dimensions of the "boundingRect" which is most restrictive top/bottom of the boundaryRect and the visual view port
   let boundaryToContainerTransformOffset = isContainerDescendentOfBoundary
     ? containerOffsetWithBoundary.top
     : 0;
diff --git a/packages/react-aria/src/overlays/usePreventScroll.ts b/packages/react-aria/src/overlays/usePreventScroll.ts
index 6ed499570d6..d61a8f6b465 100644
--- a/packages/react-aria/src/overlays/usePreventScroll.ts
+++ b/packages/react-aria/src/overlays/usePreventScroll.ts
@@ -10,15 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import {addEvent, setStyle} from '../utils/domHelpers';
 import {chain} from '../utils/chain';
-
-import {getActiveElement, getEventTarget} from '../utils/shadowdom/DOMFunctions';
+import {getEventTarget} from '../utils/shadowdom/DOMFunctions';
 import {getNonce} from '../utils/getNonce';
 import {getScrollParent} from '../utils/getScrollParent';
-import {isIOS} from '../utils/platform';
+import {isIOS, isWebKit} from '../utils/platform';
 import {isScrollable} from '../utils/isScrollable';
+import {runAfterKeyboard} from '../utils/runAfterKeyboard';
 import {useLayoutEffect} from '../utils/useLayoutEffect';
-import {willOpenKeyboard} from '../utils/keyboard';
+import {willOpenKeyboard} from '../utils/isKeyboardVisible';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -46,7 +47,7 @@ export function usePreventScroll(options: PreventScrollOptions = {}): void {
 
     preventScrollCount++;
     if (preventScrollCount === 1) {
-      if (isIOS()) {
+      if (isIOS() && isWebKit()) {
         restore = preventScrollMobileSafari();
       } else {
         restore = preventScrollStandard();
@@ -183,7 +184,7 @@ function preventScrollMobileSafari() {
     if (relatedTarget && willOpenKeyboard(relatedTarget)) {
       // Focus without scrolling the whole page, and then scroll into view manually.
       relatedTarget.focus({preventScroll: true});
-      scrollIntoViewWhenReady(relatedTarget, willOpenKeyboard(target));
+      runAfterKeyboard(() => scrollIntoView(relatedTarget));
     } else if (!relatedTarget) {
       // When tapping the Done button on the keyboard, focus moves to the body.
       // FocusScope will then restore focus back to the input. Later when tapping
@@ -197,18 +198,18 @@ function preventScrollMobileSafari() {
 
   // Override programmatic focus to scroll into view without scrolling the whole page.
   let focus = HTMLElement.prototype.focus;
-  HTMLElement.prototype.focus = function (opts) {
-    // Track whether the keyboard was already visible before.
-    let activeElement = getActiveElement();
-    let wasKeyboardVisible = activeElement != null && willOpenKeyboard(activeElement);
-
-    // Focus the element without scrolling the page.
-    focus.call(this, {...opts, preventScroll: true});
-
-    if (!opts || !opts.preventScroll) {
-      scrollIntoViewWhenReady(this, wasKeyboardVisible);
+  Reflect.defineProperty(HTMLElement.prototype, 'focus', {
+    configurable: true,
+    writable: true,
+    value: function (opts?: FocusOptions) {
+      // Focus the element without scrolling the page.
+      focus.call(this, {...opts, preventScroll: true});
+
+      if (!opts || !opts.preventScroll) {
+        runAfterKeyboard(() => scrollIntoView(this));
+      }
     }
-  };
+  });
 
   let removeEvents = chain(
     addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
@@ -220,47 +221,14 @@ function preventScrollMobileSafari() {
     restoreOverflow();
     removeEvents();
     style.remove();
-    HTMLElement.prototype.focus = focus;
+    Reflect.defineProperty(HTMLElement.prototype, 'focus', {
+      configurable: true,
+      writable: true,
+      value: focus
+    });
   };
 }
 
-// Sets a CSS property on an element, and returns a function to revert it to the previous value.
-function setStyle(element: HTMLElement, style: string, value: string) {
-  let cur = element.style[style];
-  element.style[style] = value;
-
-  return () => {
-    element.style[style] = cur;
-  };
-}
-
-// Adds an event listener to an element, and returns a function to remove it.
-function addEvent<K extends keyof GlobalEventHandlersEventMap>(
-  target: Document | Window,
-  event: K,
-  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,
-  options?: boolean | AddEventListenerOptions
-) {
-  // internal function, so it's ok to ignore the difficult to fix type error
-  // @ts-ignore
-  target.addEventListener(event, handler, options);
-  return () => {
-    // @ts-ignore
-    target.removeEventListener(event, handler, options);
-  };
-}
-
-function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean) {
-  if (wasKeyboardVisible || !visualViewport) {
-    // If the keyboard was already visible, scroll the target into view immediately.
-    scrollIntoView(target);
-  } else {
-    // Otherwise, wait for the visual viewport to resize before scrolling so we can
-    // measure the correct position to scroll to.
-    visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
-  }
-}
-
 function scrollIntoView(target: Element) {
   let root = document.scrollingElement || document.documentElement;
   let nextTarget: Element | null = target;
diff --git a/packages/react-aria/src/selection/useSelectableCollection.ts b/packages/react-aria/src/selection/useSelectableCollection.ts
index a8599907985..5f5147dc4f0 100644
--- a/packages/react-aria/src/selection/useSelectableCollection.ts
+++ b/packages/react-aria/src/selection/useSelectableCollection.ts
@@ -34,7 +34,7 @@ import {
 import {getFocusableTreeWalker} from '../focus/FocusScope';
 import {getInteractionModality} from '../interactions/useFocusVisible';
 import {getItemElement, isNonContiguousSelectionModifier, useCollectionId} from './utils';
-import {isCtrlKeyPressed} from '../utils/keyboard';
+import {isCtrlKeyPressed} from '../utils/isKeyboardVisible';
 import {isTabbable} from '../utils/isFocusable';
 import {mergeProps} from '../utils/mergeProps';
 import {MultipleSelectionManager} from 'react-stately/useMultipleSelectionState';
diff --git a/packages/react-aria/src/selection/useSelectableItem.ts b/packages/react-aria/src/selection/useSelectableItem.ts
index 39f8189430c..621af044486 100644
--- a/packages/react-aria/src/selection/useSelectableItem.ts
+++ b/packages/react-aria/src/selection/useSelectableItem.ts
@@ -25,7 +25,7 @@ import {
 import {focusSafely} from '../interactions/focusSafely';
 import {getActiveElement, getEventTarget} from '../utils/shadowdom/DOMFunctions';
 import {getCollectionId, isNonContiguousSelectionModifier} from './utils';
-import {isCtrlKeyPressed} from '../utils/keyboard';
+import {isCtrlKeyPressed} from '../utils/isKeyboardVisible';
 import {mergeProps} from '../utils/mergeProps';
 import {moveVirtualFocus} from '../focus/virtualFocus';
 import {MultipleSelectionManager} from 'react-stately/useMultipleSelectionState';
diff --git a/packages/react-aria/src/utils/domHelpers.ts b/packages/react-aria/src/utils/domHelpers.ts
index c0fe8198dd8..7589ef81dc6 100644
--- a/packages/react-aria/src/utils/domHelpers.ts
+++ b/packages/react-aria/src/utils/domHelpers.ts
@@ -1,34 +1,165 @@
-export const getOwnerDocument = (el: Element | null | undefined): Document => {
-  return el?.ownerDocument ?? document;
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {EventMapType} from '@react-types/shared';
+
+export const getOwnerDocument = (target?: EventTarget | null): Document => {
+  if (isWindow(target)) return target.document;
+
+  // @ts-expect-error Ensure safe access in SSR environments.
+  return target?.ownerDocument ?? (typeof document !== 'undefined' ? document : undefined);
 };
 
-export const getOwnerWindow = (
-  el: (Window & typeof globalThis) | Element | null | undefined
-): Window & typeof globalThis => {
-  if (el && 'window' in el && el.window === el) {
-    return el;
-  }
+export const getOwnerWindow = (el?: EventTarget | null): Window & typeof globalThis => {
+  let ownerDocument = getOwnerDocument(el);
 
-  const doc = getOwnerDocument(el as Element | null | undefined);
-  return doc.defaultView || window;
+  // @ts-expect-error Ensure safe access in SSR environments.
+  return ownerDocument?.defaultView ?? (typeof window !== 'undefined' ? window : undefined);
+};
+
+export const getOwnerViewport = (el?: EventTarget | null): VisualViewport | null => {
+  let ownerWindow = getOwnerWindow(el);
+
+  return ownerWindow?.visualViewport ?? null;
+};
+
+export const getOwnerRootElement = (el?: EventTarget | null): HTMLElement => {
+  let ownerDocument = getOwnerDocument(el);
+  let scrollingElement = ownerDocument?.scrollingElement as HTMLElement;
+
+  return scrollingElement ?? ownerDocument?.documentElement;
 };
 
 /**
  * Type guard that checks if a value is a Node. Verifies the presence and type of the nodeType
  * property.
  */
-function isNode(value: unknown): value is Node {
+export function isNode(value?: unknown): value is Node {
   return (
     value !== null &&
     typeof value === 'object' &&
     'nodeType' in value &&
-    typeof (value as Node).nodeType === 'number'
+    typeof value.nodeType === 'number'
   );
 }
+
+/**
+ * Type guard that checks if a value is an Element. Uses window self reference checks to
+ * distinguish Window from other values.
+ */
+export function isWindow(value?: unknown): value is Window & typeof globalThis {
+  return typeof value === 'object' && value != null && 'window' in value && value.window === value;
+}
+
+/**
+ * Type guard that checks if a value is a Document. Uses nodeType and documentElement checks to
+ * distinguish Document from other values.
+ */
+export function isDocument(value?: unknown): value is Document {
+  return isNode(value) && value.nodeType === 9 && 'documentElement' in value;
+}
+
+/**
+ * Type guard that checks if a value is an Element. Uses nodeType and tagName property checks to
+ * distinguish Element from other values.
+ */
+export function isElement(value?: unknown): value is Element {
+  return isNode(value) && value.nodeType === 1 && 'tagName' in value;
+}
+
+/**
+ * Type guard that checks if a value is an HTMLElement. Uses prototype checks to
+ * distinguish Element from other values.
+ */
+export function isHTMLElement(value?: unknown): value is HTMLElement {
+  return isElement(value) && value.namespaceURI === 'http://www.w3.org/1999/xhtml';
+}
+
+/**
+ * Type guard that checks if a value is a ShadowRoot. Uses nodeType and host property checks to
+ * distinguish ShadowRoot from other values.
+ */
+export function isShadowRoot(value?: unknown): value is ShadowRoot {
+  return isNode(value) && value.nodeType === 11 && 'host' in value;
+}
+
+/**
+ * Type guard that checks if a value is a SlotElement. Uses prototype and assignedElements checks to
+ * distinguish SlotElements from other values.
+ */
+export function isSlotElement(value?: unknown): value is HTMLSlotElement {
+  return isHTMLElement(value) && 'assignedElements' in value;
+}
+
+/**
+ * Attaches an event listener on target(s) and returns a cleanup function.
+ */
+export function addEvent<T extends EventTarget, K extends keyof EventMapType<Exclude<T, null>>>(
+  target: T | EventTarget[] | null,
+  event: Extract<K, string> | (string & {}),
+  listener?: (this: T, ev: EventMapType<Exclude<T, null>>[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): () => void {
+  if (listener == null || target == null) {
+    return () => {};
+  }
+
+  let eventTargets = Array.isArray(target) ? target : [target];
+
+  for (let eventTarget of eventTargets) {
+    eventTarget.addEventListener(event, listener as EventListener, options);
+  }
+
+  return () => {
+    for (let eventTarget of eventTargets) {
+      eventTarget.removeEventListener(event, listener as EventListener, options);
+    }
+  };
+}
+
 /**
- * Type guard that checks if a node is a ShadowRoot. Uses nodeType and host property checks to
- * distinguish ShadowRoot from other DocumentFragments.
+ * Sets a CSS property on an element and returns a cleanup function.
  */
-export function isShadowRoot(node: Node | null): node is ShadowRoot {
-  return isNode(node) && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+export function setStyle(
+  target: HTMLElement | HTMLElement[] | null,
+  property: string,
+  value: string,
+  priority?: string
+): () => void {
+  if (target == null) {
+    return () => {};
+  }
+
+  let restore = new Array<Function>();
+  let styleTargets = Array.isArray(target) ? target : [target];
+
+  for (let styleTarget of styleTargets) {
+    let initialValue = styleTarget.style.getPropertyValue(property);
+    let initialPriority = styleTarget.style.getPropertyPriority(property);
+
+    styleTarget.style.setProperty(property, value, priority);
+
+    restore.unshift(() => {
+      if (initialValue) {
+        styleTarget.style.setProperty(property, initialValue, initialPriority);
+      } else {
+        styleTarget.style.removeProperty(property);
+      }
+    });
+  }
+
+  return () => {
+    for (let cleanup of restore) {
+      cleanup();
+    }
+  };
 }
diff --git a/packages/react-aria/src/utils/isKeyboardVisible.ts b/packages/react-aria/src/utils/isKeyboardVisible.ts
new file mode 100644
index 00000000000..bc220c8ef8d
--- /dev/null
+++ b/packages/react-aria/src/utils/isKeyboardVisible.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {addEvent, getOwnerDocument, getOwnerViewport, getOwnerWindow} from './domHelpers';
+import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {isFirefox, isIOS, isMac} from './platform';
+
+// Tracks layout status of the on-screen keyboard.
+const cache = new WeakMap<EventTarget, KeyboardStatus>();
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset'
+]);
+
+interface KeyboardStatus {
+  isOpen: boolean;
+  innerHeight?: number;
+  resizeTimeStamp?: number;
+  resizeTimeout?: number;
+}
+
+interface KeyPressEvent {
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+}
+
+function onResize(e: Event): void {
+  let target = getEventTarget(e);
+  let ownerWindow = getOwnerWindow(target);
+
+  let status = cache.get(ownerWindow);
+  let timeStamp = Number(status?.resizeTimeStamp ?? 0);
+
+  if (status && timeStamp <= e.timeStamp + 50) {
+    status.resizeTimeStamp = e.timeStamp + 150;
+
+    ownerWindow.clearTimeout(status.resizeTimeout);
+
+    status.resizeTimeout = ownerWindow.setTimeout(() => {
+      status.isOpen = isKeyboardVisible();
+      delete status.resizeTimeout;
+      delete status.resizeTimeStamp;
+    }, 150);
+  }
+}
+
+function onIOSResize(e: Event): void {
+  let target = getEventTarget(e);
+  let ownerWindow = getOwnerWindow(target);
+
+  let status = cache.get(ownerWindow);
+
+  if (status) {
+    status.isOpen = isKeyboardVisible();
+  }
+}
+
+function setupGlobalEvents(): void {
+  let ownerWindow = getOwnerWindow();
+  let ownerViewport = getOwnerViewport();
+
+  let status: KeyboardStatus = {isOpen: false};
+
+  if (ownerWindow == null || ownerViewport == null) return;
+
+  // https://github.com/mozilla-mobile/firefox-ios/issues/33806
+  if (isIOS() && isFirefox()) {
+    status.innerHeight = ownerWindow.innerHeight;
+  }
+
+  addEvent(ownerViewport, 'resize', isIOS() ? onIOSResize : onResize);
+  cache.set(ownerWindow, status);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    setupGlobalEvents();
+  } else {
+    addEvent(document, 'DOMContentLoaded', setupGlobalEvents);
+  }
+}
+
+export function willOpenKeyboard(target: EventTarget | null): boolean {
+  let isTextArea = target instanceof HTMLTextAreaElement;
+  let isEditable = target instanceof HTMLElement && target.isContentEditable;
+  let isTextInput = target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type);
+
+  return isTextArea || isEditable || isTextInput;
+}
+
+export function isCtrlKeyPressed(event: KeyPressEvent): boolean {
+  return isMac() ? event.metaKey : event.ctrlKey;
+}
+
+export function isKeyboardOpen(): boolean {
+  let ownerWindow = getOwnerWindow();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerWindow == null || ownerViewport == null) return false;
+
+  let status = cache.get(ownerWindow);
+
+  return !!status?.isOpen;
+}
+
+export function isKeyboardVisible(): boolean {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  if (ownerWindow == null || ownerViewport == null) return false;
+
+  let status = cache.get(ownerWindow);
+
+  let activeElement = getActiveElement(ownerDocument);
+  let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+  let minHeight = Number(ownerViewport?.height) * Number(ownerViewport?.scale);
+  let maxHeight = Number(status?.innerHeight) || Number(ownerWindow.innerHeight);
+
+  return (willKeyboardOpen || !!status?.isOpen) && maxHeight - minHeight > 150;
+}
diff --git a/packages/react-aria/src/utils/keyboard.tsx b/packages/react-aria/src/utils/keyboard.tsx
deleted file mode 100644
index f0f8bd4ea88..00000000000
--- a/packages/react-aria/src/utils/keyboard.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {isMac} from './platform';
-
-interface Event {
-  altKey: boolean;
-  ctrlKey: boolean;
-  metaKey: boolean;
-}
-
-export function isCtrlKeyPressed(e: Event): boolean {
-  if (isMac()) {
-    return e.metaKey;
-  }
-
-  return e.ctrlKey;
-}
-
-// HTML input types that do not cause the software keyboard to appear.
-const nonTextInputTypes = new Set([
-  'checkbox',
-  'radio',
-  'range',
-  'color',
-  'file',
-  'image',
-  'button',
-  'submit',
-  'reset'
-]);
-
-export function willOpenKeyboard(target: Element) {
-  return (
-    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
-  );
-}
diff --git a/packages/react-aria/src/utils/platform.ts b/packages/react-aria/src/utils/platform.ts
index 673368b737a..55a752ffd2d 100644
--- a/packages/react-aria/src/utils/platform.ts
+++ b/packages/react-aria/src/utils/platform.ts
@@ -67,11 +67,11 @@ export const isAppleDevice: () => boolean = cached(function () {
 });
 
 export const isWebKit: () => boolean = cached(function () {
-  return testUserAgent(/AppleWebKit/i) && !isChrome();
+  return testUserAgent(/AppleWebKit/i) && !isChrome() && !isFirefox();
 });
 
 export const isChrome: () => boolean = cached(function () {
-  return testUserAgent(/Chrome/i);
+  return testUserAgent(/Chrome|CriOS|CrMo/i);
 });
 
 export const isAndroid: () => boolean = cached(function () {
@@ -79,5 +79,5 @@ export const isAndroid: () => boolean = cached(function () {
 });
 
 export const isFirefox: () => boolean = cached(function () {
-  return testUserAgent(/Firefox/i);
+  return testUserAgent(/(Firefox|FxiOS)/i);
 });
diff --git a/packages/react-aria/src/utils/runAfterKeyboard.ts b/packages/react-aria/src/utils/runAfterKeyboard.ts
new file mode 100644
index 00000000000..9ff296983d9
--- /dev/null
+++ b/packages/react-aria/src/utils/runAfterKeyboard.ts
@@ -0,0 +1,178 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {getActiveElement} from './shadowdom/DOMFunctions';
+import {getOwnerDocument, getOwnerViewport, getOwnerWindow} from './domHelpers';
+import {isIOS, isWebKit} from './platform';
+import {isKeyboardOpen, isKeyboardVisible, willOpenKeyboard} from './isKeyboardVisible';
+
+const intervalByWindow = new WeakMap<EventTarget, number | undefined>();
+const timeoutByWindow = new WeakMap<EventTarget, number | undefined>();
+const transitionCallbacks = new Set<QueuedCallback>();
+const resizeCallbacks = new Set<QueuedCallback>();
+
+interface QueuedCallback {
+  (isKeyboardOpen: boolean): void;
+}
+
+function onTransitionStart(): void {
+  let ownerWindow = getOwnerWindow();
+
+  let wasOpen = isKeyboardOpen();
+  let wasVisible = isKeyboardVisible();
+
+  let transitionTimeout = timeoutByWindow.get(ownerWindow);
+  let transitionInterval = intervalByWindow.get(ownerWindow);
+
+  let transitionTimer = isIOS() && isWebKit() && wasOpen ? 600 : 300;
+
+  if (transitionInterval != null && transitionTimeout != null) {
+    return;
+  }
+
+  transitionInterval = ownerWindow.setInterval(() => {
+    let isOpen = isKeyboardOpen();
+    let isVisible = isKeyboardVisible();
+
+    if (wasOpen !== isOpen) {
+      for (let callback of resizeCallbacks) {
+        callback(isOpen);
+        resizeCallbacks.delete(callback);
+      }
+    }
+
+    if ((!isIOS() && wasVisible !== isVisible) || (wasVisible && !isVisible)) {
+      for (let callback of transitionCallbacks) {
+        callback(isVisible);
+        transitionCallbacks.delete(callback);
+      }
+    }
+
+    if (!transitionCallbacks.size && !resizeCallbacks.size) {
+      onTransitionEnd();
+    }
+  }, 50);
+
+  transitionTimeout = ownerWindow.setTimeout(() => {
+    let isOpen = isKeyboardOpen();
+    let isVisible = isKeyboardVisible();
+
+    for (let callback of resizeCallbacks) {
+      callback(isOpen);
+      resizeCallbacks.delete(callback);
+    }
+
+    for (let callback of transitionCallbacks) {
+      callback(isVisible);
+      transitionCallbacks.delete(callback);
+    }
+
+    onTransitionEnd();
+  }, transitionTimer);
+
+  timeoutByWindow.set(ownerWindow, transitionTimeout);
+  intervalByWindow.set(ownerWindow, transitionInterval);
+}
+
+function onTransitionEnd(): void {
+  let ownerWindow = getOwnerWindow();
+
+  let transitionTimeout = timeoutByWindow.get(ownerWindow);
+  let transitionInterval = intervalByWindow.get(ownerWindow);
+
+  ownerWindow.clearTimeout(transitionTimeout);
+  ownerWindow.clearInterval(transitionInterval);
+
+  timeoutByWindow.delete(ownerWindow);
+  intervalByWindow.delete(ownerWindow);
+}
+
+/**
+ * Delays a callback execution until a keyboard transition may no longer impact layout.
+ * Guarantees an invocation if an expected transition did not finish within 300ms.
+ */
+export function runAfterKeyboard(fn: QueuedCallback): () => void {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  // Flush synchronously when the viewport API is unsupported.
+  if (ownerViewport == null) {
+    return fn(false) ?? (() => {});
+  }
+
+  // Assert based on geometry rather than focus to support intermediate states, in which
+  // document.activeElement can't be used to reliably infer the open state of the OSK.
+  let wasKeyboardOpen = isKeyboardOpen();
+
+  // Wait one frame to see if focus lands on an input.
+  let frame = ownerWindow.requestAnimationFrame(() => {
+    let activeElement = getActiveElement(ownerDocument);
+    let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+    // If keyboard won't change, call the function immediately.
+    if (wasKeyboardOpen === willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    // On close, fire immediately since consumers may assert the ICB.
+    if (wasKeyboardOpen && !willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    resizeCallbacks.add(fn);
+    onTransitionStart();
+  });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    resizeCallbacks.delete(fn);
+  };
+}
+
+/**
+ * Delays a callback execution until the on-screen keyboard has finished its transition.
+ * Guarantees an invocation if an expected transition did not finish within 600ms.
+ */
+export function runAfterKeyboardTransition(fn: QueuedCallback): () => void {
+  let ownerWindow = getOwnerWindow();
+  let ownerDocument = getOwnerDocument();
+  let ownerViewport = getOwnerViewport();
+
+  // Flush synchronously when the viewport API is unsupported.
+  if (ownerViewport == null) {
+    return fn(false) ?? (() => {});
+  }
+
+  // Assert based on geometry rather than focus to support intermediate states, in which
+  // document.activeElement can't be used to reliably infer the open state of the OSK.
+  let wasKeyboardOpen = isKeyboardOpen();
+
+  // Wait one frame to see if focus lands on an input.
+  let frame = ownerWindow.requestAnimationFrame(() => {
+    let activeElement = getActiveElement(ownerDocument);
+    let willKeyboardOpen = ownerDocument.hasFocus() && willOpenKeyboard(activeElement);
+
+    // If keyboard won't transition, fire immediately.
+    if (wasKeyboardOpen === willKeyboardOpen) {
+      return fn(willKeyboardOpen);
+    }
+
+    transitionCallbacks.add(fn);
+    onTransitionStart();
+  });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    transitionCallbacks.delete(fn);
+  };
+}
diff --git a/packages/react-aria/src/utils/runAfterTransition.ts b/packages/react-aria/src/utils/runAfterTransition.ts
index 80e31fc112f..784bba2b79f 100644
--- a/packages/react-aria/src/utils/runAfterTransition.ts
+++ b/packages/react-aria/src/utils/runAfterTransition.ts
@@ -10,88 +10,85 @@
  * governing permissions and limitations under the License.
  */
 
+import {addEvent, getOwnerDocument, getOwnerWindow} from './domHelpers';
+import {getEventTarget} from './shadowdom/DOMFunctions';
+
 // We store a global list of elements that are currently transitioning,
 // mapped to a set of CSS properties that are transitioning for that element.
 // This is necessary rather than a simple count of transitions because of browser
 // bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
 // than one or the other. So we need to track what's actually transitioning so that
 // we can ignore these duplicate events.
-import {getEventTarget} from './shadowdom/DOMFunctions';
-let transitionsByElement = new Map<EventTarget, Set<string>>();
+const transitionsByElement = new Map<EventTarget, Set<string>>();
+const transitionCallbacks = new Set<QueuedCallback>();
 
-// A list of callbacks to call once there are no transitioning elements.
-let transitionCallbacks = new Set<() => void>();
+interface QueuedCallback {
+  (isTransition: boolean): void;
+}
 
-function setupGlobalEvents() {
-  if (typeof window === 'undefined') {
+function isTransitionEvent(event: Event): event is TransitionEvent {
+  return 'propertyName' in event;
+}
+
+function onTransitionStart(e: Event) {
+  let eventTarget = getEventTarget(e);
+
+  if (!isTransitionEvent(e) || !eventTarget) {
     return;
   }
 
-  function isTransitionEvent(event: Event): event is TransitionEvent {
-    return 'propertyName' in event;
+  // Add the transitioning property to the list for this element.
+  let transitions = transitionsByElement.get(eventTarget);
+
+  if (!transitions) {
+    transitions = new Set();
+    transitionsByElement.set(eventTarget, transitions);
+
+    // The transitioncancel event must be registered on the element itself, rather than as a global
+    // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+    // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+    eventTarget.addEventListener('transitioncancel', onTransitionEnd, {once: true});
   }
 
-  let onTransitionStart = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(eventTarget);
-    if (!transitions) {
-      transitions = new Set();
-      transitionsByElement.set(eventTarget, transitions);
-
-      // The transitioncancel event must be registered on the element itself, rather than as a global
-      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
-      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
-        once: true
-      });
-    }
+  transitions.add(e.propertyName);
+}
 
-    transitions.add(e.propertyName);
-  };
+function onTransitionEnd(e: Event) {
+  let eventTarget = getEventTarget(e);
 
-  let onTransitionEnd = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(eventTarget);
-    if (!properties) {
-      return;
-    }
+  if (!isTransitionEvent(e) || !eventTarget) {
+    return;
+  }
 
-    properties.delete(e.propertyName);
+  // Remove property from list of transitioning properties.
+  let properties = transitionsByElement.get(eventTarget);
 
-    // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
-    if (properties.size === 0) {
-      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(eventTarget);
-    }
+  if (!properties) {
+    return;
+  }
 
-    // If no transitioning elements, call all of the queued callbacks.
-    if (transitionsByElement.size === 0) {
-      for (let cb of transitionCallbacks) {
-        cb();
-      }
+  properties.delete(e.propertyName);
 
-      transitionCallbacks.clear();
-    }
-  };
+  // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+  if (properties.size === 0) {
+    eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+    transitionsByElement.delete(eventTarget);
+  }
 
-  document.body.addEventListener('transitionrun', onTransitionStart);
-  document.body.addEventListener('transitionend', onTransitionEnd);
+  // If no transitioning elements, call all of the queued callbacks.
+  if (transitionsByElement.size === 0) {
+    for (let callback of transitionCallbacks) {
+      callback(true);
+      transitionCallbacks.delete(callback);
+    }
+  }
 }
 
-if (typeof document !== 'undefined') {
-  if (document.readyState !== 'loading') {
-    setupGlobalEvents();
-  } else {
-    document.addEventListener('DOMContentLoaded', setupGlobalEvents);
-  }
+function setupGlobalEvents() {
+  let ownerDocument = getOwnerDocument();
+
+  addEvent(ownerDocument, 'transitionrun', onTransitionStart);
+  addEvent(ownerDocument, 'transitionend', onTransitionEnd);
 }
 
 /**
@@ -109,16 +106,35 @@ function cleanupDetachedElements() {
   }
 }
 
-export function runAfterTransition(fn: () => void): void {
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    setupGlobalEvents();
+  } else {
+    addEvent(document, 'DOMContentLoaded', setupGlobalEvents);
+  }
+}
+
+/**
+ * Delays a callback execution until all elements finished their transition.
+ */
+export function runAfterTransition(fn: QueuedCallback): () => void {
+  let ownerWindow = getOwnerWindow();
+
   // Wait one frame to see if an animation starts, e.g. a transition on mount.
-  requestAnimationFrame(() => {
+  let frame = ownerWindow.requestAnimationFrame(() => {
     cleanupDetachedElements();
+
     // If no transitions are running, call the function immediately.
     // Otherwise, add it to a list of callbacks to run at the end of the animation.
     if (transitionsByElement.size === 0) {
-      fn();
-    } else {
-      transitionCallbacks.add(fn);
+      return fn(false);
     }
+
+    transitionCallbacks.add(fn);
   });
+
+  return () => {
+    ownerWindow.cancelAnimationFrame(frame);
+    transitionCallbacks.delete(fn);
+  };
 }
diff --git a/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts b/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts
index 6ca0e476f5e..3c3d6d5db3e 100644
--- a/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts
+++ b/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts
@@ -1,7 +1,15 @@
 // Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
 /* eslint-disable rsp-rules/no-non-shadow-contains, rsp-rules/safe-event-target */
 
-import {getOwnerWindow, isShadowRoot} from '../domHelpers';
+import {EventTargetType} from '@react-types/shared';
+import {
+  getOwnerDocument,
+  isDocument,
+  isElement,
+  isHTMLElement,
+  isShadowRoot,
+  isSlotElement
+} from '../domHelpers';
 import {shadowDOM} from 'react-stately/private/flags/flags';
 import type {SyntheticEvent} from 'react';
 
@@ -9,8 +17,8 @@ import type {SyntheticEvent} from 'react';
  * ShadowDOM safe version of Node.contains.
  */
 export function nodeContains(
-  node: Node | Element | null | undefined,
-  otherNode: Node | Element | null | undefined
+  node: Node | null | undefined,
+  otherNode: Node | null | undefined
 ): boolean {
   if (!shadowDOM()) {
     return otherNode && node ? node.contains(otherNode) : false;
@@ -20,24 +28,19 @@ export function nodeContains(
     return false;
   }
 
-  let currentNode: HTMLElement | Node | null | undefined = otherNode;
+  let current: Node | null = otherNode;
 
-  while (currentNode !== null) {
-    if (currentNode === node) {
+  while (current != null) {
+    if (current === node) {
       return true;
     }
 
-    if (
-      (currentNode as HTMLSlotElement).tagName === 'SLOT' &&
-      (currentNode as HTMLSlotElement).assignedSlot
-    ) {
-      // Element is slotted
-      currentNode = (currentNode as HTMLSlotElement).assignedSlot!.parentNode;
-    } else if (isShadowRoot(currentNode)) {
-      // Element is in shadow root
-      currentNode = currentNode.host;
+    if (isHTMLElement(current) && !isSlotElement(current) && current.assignedSlot?.parentNode) {
+      current = current.assignedSlot.parentNode;
+    } else if (isShadowRoot(current)) {
+      current = current.host;
     } else {
-      currentNode = currentNode.parentNode;
+      current = current.parentNode;
     }
   }
 
@@ -47,39 +50,38 @@ export function nodeContains(
 /**
  * ShadowDOM safe version of document.activeElement.
  */
-export const getActiveElement = (doc: Document = document): Element | null => {
-  if (!shadowDOM()) {
+export const getActiveElement = (doc: Document = getOwnerDocument()): Element | null => {
+  if (!doc) {
+    return null;
+  } else if (!shadowDOM()) {
     return doc.activeElement;
   }
-  let activeElement: Element | null = doc.activeElement;
-
-  while (
-    activeElement &&
-    'shadowRoot' in activeElement &&
-    activeElement.shadowRoot?.activeElement
-  ) {
-    activeElement = activeElement.shadowRoot.activeElement;
+
+  let current: Element | null = doc.activeElement;
+
+  while (isElement(current) && current.shadowRoot?.activeElement) {
+    current = current.shadowRoot.activeElement;
   }
 
-  return activeElement;
+  return current;
 };
 
-// Type helper to extract the target element type from an event
-type EventTargetType<T> = T extends SyntheticEvent<infer E, any> ? E : EventTarget;
-
 // Possibly we can improve the types for this using https://github.com/adobe/react-spectrum/pull/8991/changes#diff-2d491c0c91701d28d08e1cf9fcadbdb21a030b67ab681460c9934140f29127b8R68 but it was more changes than I
 // wanted to make to fix the function.
 /**
  * ShadowDOM safe version of event.target.
  */
 export function getEventTarget<T extends Event | SyntheticEvent>(event: T): EventTargetType<T> {
-  if (shadowDOM() && event.target instanceof Element && event.target.shadowRoot) {
+  if (shadowDOM() && isElement(event.target) && event.target.shadowRoot) {
     if ('composedPath' in event) {
       return (event.composedPath()[0] ?? null) as EventTargetType<T>;
-    } else if ('composedPath' in event.nativeEvent) {
+    }
+
+    if ('composedPath' in event.nativeEvent) {
       return (event.nativeEvent.composedPath()[0] ?? null) as EventTargetType<T>;
     }
   }
+
   return event.target as EventTargetType<T>;
 }
 
@@ -93,14 +95,14 @@ export function isFocusWithin(node: Element | null | undefined): boolean {
   if (!node) {
     return false;
   }
+
   // Get the active element within the node's parent shadow root (or the document). Can return null.
   let root = node.getRootNode();
-  let ownerWindow = getOwnerWindow(node);
-  if (!(root instanceof ownerWindow.Document || root instanceof ownerWindow.ShadowRoot)) {
+
+  if (!isDocument(root) && !isShadowRoot(root)) {
     return false;
   }
-  let activeElement = root.activeElement;
 
   // Check if the active element is within this node. These nodes are within the same shadow root.
-  return activeElement != null && node.contains(activeElement);
+  return root.activeElement != null && node.contains(root.activeElement);
 }
diff --git a/packages/react-aria/src/utils/useEvent.ts b/packages/react-aria/src/utils/useEvent.ts
index 1dd35499847..9ebfe86f74b 100644
--- a/packages/react-aria/src/utils/useEvent.ts
+++ b/packages/react-aria/src/utils/useEvent.ts
@@ -10,28 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject} from '@react-types/shared';
+import {addEvent} from './domHelpers';
+import {EventMapType, RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 import {useEffectEvent} from './useEffectEvent';
 
-export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
-  ref: RefObject<EventTarget | null>,
-  event: K | (string & {}),
-  handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+export function useEvent<T extends EventTarget, K extends keyof EventMapType<T>>(
+  ref: RefObject<T | null>,
+  event: Extract<K, string> | (string & {}),
+  listener?: (this: T, ev: EventMapType<Exclude<T, null>>[K]) => any,
   options?: boolean | AddEventListenerOptions
 ): void {
-  let handleEvent = useEffectEvent(handler);
-  let isDisabled = handler == null;
+  let handleEvent = useEffectEvent(listener);
+  let isDisabled = listener == null;
 
   useEffect(() => {
-    if (isDisabled || !ref.current) {
+    if (isDisabled || ref.current == null) {
       return;
     }
 
-    let element = ref.current;
-    element.addEventListener(event, handleEvent as EventListener, options);
-    return () => {
-      element.removeEventListener(event, handleEvent as EventListener, options);
-    };
+    return addEvent(ref.current, event, handleEvent, options);
   }, [ref, event, options, isDisabled]);
 }
diff --git a/packages/react-aria/src/utils/useViewportSize.ts b/packages/react-aria/src/utils/useViewportSize.ts
index 6ff0c4f7d94..61937950d5f 100644
--- a/packages/react-aria/src/utils/useViewportSize.ts
+++ b/packages/react-aria/src/utils/useViewportSize.ts
@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {getEventTarget} from './shadowdom/DOMFunctions';
 import {isIOS} from './platform';
-import {useEffect, useState} from 'react';
+import {runAfterKeyboard} from './runAfterKeyboard';
+import {useEffect, useRef, useState} from 'react';
 import {useIsSSR} from '../ssr/SSRProvider';
-import {willOpenKeyboard} from './keyboard';
+import {willOpenKeyboard} from './isKeyboardVisible';
 
 interface ViewportSize {
   width: number;
@@ -25,6 +26,7 @@ let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 export function useViewportSize(): ViewportSize {
   let isSSR = useIsSSR();
+  let unmountRef = useRef<Function>(null);
   let [size, setSize] = useState(() => (isSSR ? {width: 0, height: 0} : getViewportSize()));
 
   useEffect(() => {
@@ -49,24 +51,23 @@ export function useViewportSize(): ViewportSize {
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
     // We can anticipate this and resize early by handling the blur event and using the layout size.
-    let frame: number;
     let onBlur = (e: FocusEvent) => {
       if (visualViewport && visualViewport.scale > 1) {
         return;
       }
 
-      if (willOpenKeyboard(getEventTarget(e) as Element)) {
-        // Wait one frame to see if a new element gets focused.
-        frame = requestAnimationFrame(() => {
-          let activeElement = getActiveElement();
-          if (!activeElement || !willOpenKeyboard(activeElement)) {
-            updateSize({
-              width: document.documentElement.clientWidth,
-              height: document.documentElement.clientHeight
-            });
-          }
-        });
+      if (!willOpenKeyboard(getEventTarget(e))) {
+        return;
       }
+
+      unmountRef.current = runAfterKeyboard(isOpen => {
+        if (isOpen) return;
+
+        updateSize({
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        });
+      });
     };
 
     updateSize(getViewportSize());
@@ -82,7 +83,7 @@ export function useViewportSize(): ViewportSize {
     }
 
     return () => {
-      cancelAnimationFrame(frame);
+      unmountRef.current?.();
       if (isIOS()) {
         window.removeEventListener('blur', onBlur, true);
       }
diff --git a/starters/docs/src/Modal.css b/starters/docs/src/Modal.css
index 9241945b5f3..c3472373a24 100644
--- a/starters/docs/src/Modal.css
+++ b/starters/docs/src/Modal.css
@@ -35,6 +35,10 @@
   width: max-content;
   max-width: min(500px, 90vw);
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering] {
     animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
diff --git a/starters/docs/src/Popover.css b/starters/docs/src/Popover.css
index ae55f90464c..0628d9c2d43 100644
--- a/starters/docs/src/Popover.css
+++ b/starters/docs/src/Popover.css
@@ -28,6 +28,10 @@
     stroke-width: 2px;
   }
 
+  &:not([data-open]) {
+    opacity: 0;
+  }
+
   &[data-entering],
   &[data-exiting] {
     transform: var(--origin);
diff --git a/starters/tailwind/src/Modal.tsx b/starters/tailwind/src/Modal.tsx
index 13cc96111bc..dbaf714dba5 100644
--- a/starters/tailwind/src/Modal.tsx
+++ b/starters/tailwind/src/Modal.tsx
@@ -23,6 +23,9 @@ const modalStyles = tv({
     },
     isExiting: {
       true: 'animate-out zoom-out-95 ease-in duration-200'
+    },
+    isOpen: {
+      false: 'opacity-0'
     }
   }
 });