Dialog (Modal) - slide-in full screen modal - position "shifts up", renders above the top of the screen

[jonathanrstern]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v1.7.2

What browser are you using?

For example: iOS Chrome - mobile

Example of the modal being positioned incorrectly -- the page shifts up for a reason I cannot figure out:

RPReplay_Final1688589688.MP4

Example of the modal sliding in correctly -- this happens 8 or 9 times out of 10. I'm trying to figure out what it going on when it doesn't work!

RPReplay_Final1688590194.MP4

[syradar]

Happening to me too. Happens only when it is too small and it is scrollable for me.
"@headlessui/react": "^1.7.15",
Firefox 114.0.2
macOS Ventura 13.4.1 M1

Normal height

Bottom is fine (some padding)

Top gets cut off

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Can you attach a minimal reproduction repo that has this behaviour?

[jonathanrstern]

@RobinMalfait Not able to attach a reproduction repo but I've done several hours of debugging and am 90% sure it's related to iOS's 100vh bug.

Do you know to what degree HeadlessUI modals are affected by the iOS 100vh bug ("feature")?