iOS Keyboard moves Dialog out of viewport
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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_
Contributor guide
Research direction
Start with the Modal first example on the react-aria.adobe.com documentation and reproduce the issue in Safari on iOS by repeatedly opening and closing the keyboard with the second input focused. Done means the dialog no longer moves outside the viewport or leaves a gap above the keyboard during the described sequence.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 42/100