iOS Keyboard moves Dialog out of viewport

[bmsuseluda]

Provide a general summary of the issue here

On iOS it can happen that the keyboard moves the dialog out of the viewport. In this scenario top: 0 will result in the dialog starts outside of the viewport.

In most cases it looks like this:

But sometimes it looks like this:

🤔 Expected Behavior?

I guess this is a Safari Bug on iOS, but maybe this can be detected and there could be a workaround for this.

😯 Current Behavior

Sometimes the dialog will be moved out of the viewport when the keyboard is opened.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

I made the screenshots on https://react-aria.adobe.com/Modal with the first example.

1. Just open the dialog. Now it looks good like it should.
2. Click on the text or headline of the dialog to close the keyboard
3. Click on the second input field (E-Mail) to open the keyboard
4. close and open it several times to reproduce the gap between the keyboard and the dialog

Sadly it does not happen every time, therefore several attempts are necessary.

Version

The version that was used on the official documentation of react aria

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

iOS 26

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Images appear to be broken links, could you re-upload the screenshots?

I tried your reproduction steps on iOS 26.4 and was unable to reproduce, but maybe the screenshots will make something more clear.

[bmsuseluda]

@snowystinger Could you check again? I asked several friends and colleagues and everyone can see the screenshots.

[snowystinger]

Ok, I can see it now, thank you! I've been unsuccessful in doing what is in those screenshots. Do you have any more tips for recreating it?