Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.7k
Description
Describe the bug
I have a floating element that has its height limited viasize
middleware. The floating element also has overflow, and has a form inside of it.
On iOS Safari, when the floating element is open and user focuses the input in the form, the on-screen keyboard triggers scroll and resize of the visual viewport. Available height fromsize
middleware is adjusted properly, but the scroll change is not taken into account for the general floating element position.
To Reproduce
Steps to reproduce the behavior:https://codesandbox.io/p/devbox/gallant-mountain-rk2vw6?workspaceId=ws_R2q9KUfHSa53dxJt6vpPTF
I'm testing this on Browserstack myself, iPhone 15 with Safari 17.
- Go tohttps://rk2vw6.csb.app/
- Click on 'My trigger' to open the popover
- Scroll down in the popover until the input element is visible (should be at the bottom of popover so keyboard would trigger scroll):
- Click on the input to focus it
- Observe that floating element height is adjusted, but due to Safari also scrolling the viewport (it tries to center the input at the middle point of visual viewport I think), the floating element does not fill the entire visual viewport height, nor is the input actually visible anymore.
Expected behavior
The floating element should still fill the entire available height of the visual viewport, even if the visual viewport is scrolled because of the on-screen keyboard.
Not sure whether we can override the Safari autoscroll behavior (scroll visual viewport back to top?), or we'd need to actually adjust the position and/or height.
Screenshots
See above.
Context:
- OS: iOS
- Browser: Safari 17
Additional context
In some cases, the input will remain visible in the scrollable floating element, but the floating element itself is still shifted away. If the floating element has outside click closing enabled (which most do I think), it's quite cumbersome for users to manually scroll back to the "correct" position, especially if such scrollable floating element also has e.g.overscroll-behavior: contain;
defined.