New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slideover/Modal does not cover the full page if input is focused on Safari (iOS) #1867
Comments
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! 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? RPReplay_Final1664134514.movAlso, I noticed that you can use |
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 More info on those: https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ |
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. Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2022-10-10.at.16.18.04.mp4 |
Hey! Thank you for your bug report! This should be fixed by #2100, and will be available in the next release. You can already try it using:
|
@RobinMalfait Looks great! Thanks for the update. 🙂 |
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).
Bildschirmfoto.2022-09-21.um.21.28.19.mp4
The text was updated successfully, but these errors were encountered: