headlessui
headlessui copied to clipboard
tailwindlabs
Slideover/Modal does not cover the full page if input is focused on Safari (iOS)
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
v1.7.2
What browser are you using?
Safari
Reproduction URL
I used the code from "Wide create project form example" from tailwindui. As it's not free, I will not paste it here.
Describe your issue
If a slideover has an input, the height of the slideover is cropped if this input is focused. This does not happen on Safari on macOS, button Safari on iOS (I used Xcode's simulator to recreate the example I am attaching here).
https://user-images.githubusercontent.com/23051150/191594958-927d2cb6-e31b-4148-b9d5-7d9616aafbc6.mp4
Hint: This does not happen if the first focused element is a button or something else (at least when the address bar is not at the bottom).
Hey! Thank you for your bug report! Much appreciated! 🙏
This might be a simulator issue where the keyboard is not shown. While testing it on my real device it does seems to behave as expected. Can you verify that this is issue can be reproduced on a real device?
https://user-images.githubusercontent.com/1834413/192162106-04329c34-ba4a-462c-b601-3714d17cd942.mov
Also, I noticed that you can use cmd+k to toggle the keyboard in the simulator, maybe that helps with your issue as well if you want to keep developing against a simulator?
Unfortunately I can reproduce this on my iPhone 12 Pro Max Ultra or whatever this thingie is called ;-) It's the large one and frustrating enough, the error appears if the URL-input-field is set to the bottom (as yours is too in the screencast).
I will try to create a reusable example on codepen :-)
Does it help if you play with the viewport units a bit? Right now we are positioning the slideover, but the Safari browser on iOS behaves a bit oddly when showing/hiding those ares (like the URL bar).
The only problem with those units is that they are new and aren't supported everywhere so depending on the OS and browser version you are running it may or may not be available.
I wonder if using 100dvh for the height of the body for example fixes the issue for you.
More info on those: https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ Or if you have some time, this is a very interesting video to watch: https://www.youtube.com/watch?v=xl9R8aTOW_I
Having some of the same issues. You can see in this video that the entire bottom icon bar moves up with it, like the body is being cut off, since that element is positioned `fixed.
https://user-images.githubusercontent.com/6118407/194960859-b0fb4617-d065-49c6-b8d0-5c03e6b58ab6.mp4
Hey! Thank you for your bug report! Much appreciated! 🙏
This should be fixed by #2100, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders.npm install @headlessui/vue@insiders.