fix: Improve behavior of modals on iOS 26 #8888

devongovett · 2025-09-18T04:20:36Z

iOS 26 viewport changes

iOS Safari 26 significantly changes how the visual viewport works due to the controls that now overlay on top of the page. position: fixed elements are clipped to the viewport below the status bar and above the address bar, but other content continues to scroll behind them. This means that the modal backdrop will not fill the entire visible viewport, which looks strange.

To fix this, we can use position: absolute for the backdrop instead of fixed, and make it cover the entire page instead of just the visual viewport. The actual modal is still sized within the visual viewport. For trays, we add additional padding that extends behind the address bar so it looks seamless.

I also made useViewportSize update during the blur event instead of waiting for the resize event, which occurs after the keyboard animation is complete. This makes it feel a bit faster.

usePreventScroll improvements

The usePreventScroll logic on iOS sometimes causes flickering when tapping on an input as we temporarily applied a transform to trick safari into not scrolling. Turns out we can avoid this by preemptively calling relatedTarget.focus({preventScroll: true}) during the blur event, and then scrolling ourselves.

In iOS 26, we can also no longer apply overscroll-behavior: contain during the touchstart event, it must be applied before that. So now we inject a small <style> element to ensure this is applied everywhere while usePreventScroll is active.

I also improved the scroll into view logic so that it centers the input within the viewport, and smoothly animates into view just like the native implementation does (just without scrolling the entire page).

ScreenRecording_09-17-2025.21-18-33_1.MP4

rspbot · 2025-09-18T04:22:05Z

Build successful! 🎉

devongovett · 2025-09-18T04:27:37Z

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

+      data-testid="underlay"
+      {...otherProps}
+      // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
+      style={{height: isOpen && typeof document !== 'undefined' ? document.body.clientHeight : undefined}}


Assumes the clientHeight won't change much while a modal/tray is open. Otherwise we have to put a resize observer I guess, and that would be unfortunate...

devongovett · 2025-09-18T04:28:17Z

packages/@react-spectrum/s2/src/Dialog.tsx

-    // Make the whole dialog scroll rather than only the content when the height it small.
-    [`@media (height < ${400 / 16}rem)`]: 'visible'
+    // Make the whole dialog scroll rather than only the content when the height is small.
+    [`@container (height < ${500 / 16}rem)`]: 'visible'


Using container queries for this because when the keyboard opens the visual viewport resizes but the media query doesn't update.

devongovett · 2025-09-18T04:29:12Z

packages/dev/s2-docs/src/Layout.tsx

-            <article
+        <div
+          className={style({
+            isolation: 'isolate',


new div to add isolation: isolate. This makes the sticky header appear behind dialogs.

devongovett · 2025-09-18T04:29:43Z

packages/react-aria-components/docs/Modal.mdx

+  max-height: var(--visual-viewport-height);
+  top: calc(var(--visual-viewport-height) / 2);
+  left: 50%;
+  translate: -50% -50%;


Kind of a weird hack to center the modal without adding an extra div wrapper to the example...

snowystinger

I'm running into some buggy problems in https://reactspectrum.blob.core.windows.net/reactspectrum/4971777a6c845fb8eeadce7a21a96ac76eac44f8/docs/react-aria/index.html

Particularly when i tap in the Date Planted then try to open the date picker inside the create new dialog. Or try to use any of the other controls. I'm unsure what is an iOS 26 bug vs ours. Like the text cursor definitely seems like a Safari problem...

It's all so... floaty and see through, sometimes it just looks like a bug when it's probably how it's supposed to be... like that url bar that floats so high above the keyboard....

Edit: compared to main, the cursor used to be ok for some reason? but the names were always cutoff

In this next image, i had tried to open the DatePicker and was unsucessful, wouldn't open in my viewport.

packages/@adobe/spectrum-css-temp/components/tray/index.css

packages/@react-aria/overlays/src/usePreventScroll.ts

jeffijoe · 2025-09-18T09:07:01Z

@devongovett I tested it out on iOS 18.6.2, looks like there's still the issue with the overscrolling.

dialog-encoded.mp4

Thanks for working on this by the way! 🙏

devongovett · 2025-09-18T17:15:05Z

Thanks for testing.

@snowystinger yeah, the issue with the small address bar on top of the modal seems to be a Safari issue. It occurs specifically with inputs that have autocorrect="off", which is why it doesn't happen for the "Scientific Name" field but does for the ComboBox and DatePicker. Safari seems to be calculating the position as if the autocorrect bar above the keyboard was there, and after the animation firing a second visual viewport resize (which is why it jumps a little). And the address bar just remains mis-positioned. Guessing that's why the cursor is also mis-positioned. Not sure there's much we can do there unfortunately. I'll see if a webkit bug got reported yet.

@jeffijoe looks like maybe the over scrolling happens when tapping on the whitespace in the date picker? If you tap on a segment itself it seems ok. I guess that's due to programmatic focus rather than the browser default tap behavior. I'll see if there's anything I can do about that.

jeffijoe · 2025-09-18T17:21:06Z

@devongovett the over-scrolling also happens for me in the current build when focusing any element (e.g. just a regular input) that is near the bottom, if that helps.

devongovett · 2025-09-18T17:43:40Z

@jeffijoe Thanks. I added a commit to clamp the scroll position which should prevent that. I also tried to fix the programmatic scrolling issue when tapping the date field.

rspbot · 2025-09-18T17:48:58Z

Build successful! 🎉

jeffijoe · 2025-09-18T18:02:24Z

@devongovett just tried the latest build and the modal example on the main site is so much better now! 🙏

devongovett · 2025-09-18T18:07:06Z

Ah, I found a way to fix the mis-positioned address bar issue too! Just needed to copy all the attributes that might affect the height of the keyboard (e.g. autocorrect, inputMode, etc.) over to the temporary input.

rspbot · 2025-09-18T18:14:27Z

Build successful! 🎉

rspbot · 2025-09-18T18:16:17Z

Build successful! 🎉

rspbot · 2025-09-18T18:36:07Z

Build successful! 🎉

rspbot · 2025-09-18T20:19:07Z

Build successful! 🎉

rspbot · 2025-09-18T20:19:09Z

## API Changes

@react-aria/utils

/@react-aria/utils:willOpenKeyboard

+willOpenKeyboard {
+  target: Element
+  returnVal: undefined
+}

devongovett · 2025-09-18T20:24:42Z

I think I managed to remove the hidden input hack entirely? Turns out if you preemptively focus the real input with{preventScroll: true} it will disable Safari's default behavior. Does anyone still have iOS 18 or earlier versions to test this version?

jeffijoe · 2025-09-18T20:35:14Z

@devongovett I do! Here's a recording of the current behavior from the latest build. Looks like the scroll behavior has been fixed. The only issues I see:

The don't seem to allow navigating from the 2nd input to the 3rd dropdown
The popovers (e.g. the calendar) are slower to adjust their positioning than the modal itself

I'm just happy the scroll and focus issues are resolved! 🙏 When do you think this will be released? 👀

modal-encoded.mp4

devongovett · 2025-09-18T20:42:11Z

Thanks! Yeah the up/down arrows only work with native inputs, not with our Select. We have a hidden input in there but seems like Safari requires it to be visible. Not sure there's much we can do about that unfortunately.

snowystinger

That is so much better!

LFDanLu

Behavior seems good on Android Chrome and desktop, approving for deeper testing on Monday. The Chromatic caught some strange behaviors that I'm actually unable to reproduce locally so I'd be fine accepting those as the new baselines if we discover that those are truly just chromatic specific.

devongovett added 5 commits September 17, 2025 20:51

Improve usePreventScroll focus behavior on iOS

83ce696

Make visual viewport size update before keyboard animation

bf6f1a1

Update modals and trays to extend underlay behind browser UI

3e51ce5

Fix S2 docs header appearing above modals

b96e4f3

fix removing event

4971777

devongovett mentioned this pull request Sep 18, 2025

Issues with modal scrolling + focus on Safari #7902

Open

devongovett commented Sep 18, 2025

View reviewed changes

snowystinger reviewed Sep 18, 2025

View reviewed changes

packages/@adobe/spectrum-css-temp/components/tray/index.css Show resolved Hide resolved

packages/@react-aria/overlays/src/usePreventScroll.ts Show resolved Hide resolved

devongovett added 4 commits September 18, 2025 10:38

Clamp scroll position to prevent over-scrolling

0a44299

Prevent scrolling the whole page when programmatically focusing

95c1712

Avoid setting size on blur too early

72acee0

Example app fix

576f9e9

Ensure temporary input has attributes that might affect keyboard size

c01f92a

typo

3f82af3

Fix scroll into view calculation when the address bar is collapsed

86f840a

Try removing the hidden input entirely

e6ea1be

snowystinger approved these changes Sep 19, 2025

View reviewed changes

LFDanLu approved these changes Sep 19, 2025

View reviewed changes

LFDanLu added the ready for review label Sep 19, 2025

fix: Improve behavior of modals on iOS 26 #8888

Are you sure you want to change the base?

fix: Improve behavior of modals on iOS 26 #8888

Conversation

devongovett commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

iOS 26 viewport changes

usePreventScroll improvements

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

devongovett Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

devongovett Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devongovett Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

devongovett Sep 18, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jeffijoe commented Sep 18, 2025

Uh oh!

devongovett commented Sep 18, 2025

Uh oh!

jeffijoe commented Sep 18, 2025

Uh oh!

devongovett commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

jeffijoe commented Sep 18, 2025

Uh oh!

devongovett commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

Uh oh!

rspbot commented Sep 18, 2025

@react-aria/utils

/@react-aria/utils:willOpenKeyboard

Uh oh!

devongovett commented Sep 18, 2025

Uh oh!

jeffijoe commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

devongovett commented Sep 18, 2025

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

devongovett commented Sep 18, 2025 •

edited

Loading

devongovett Sep 18, 2025 •

edited

Loading

snowystinger left a comment •

edited

Loading

devongovett commented Sep 18, 2025 •

edited

Loading

jeffijoe commented Sep 18, 2025 •

edited

Loading