Bug: Bottom Gap appears randomly

[adshrc]

Hi,

it seems like an essential thing broke since iOS 16.4 (seems like Android is not affected): The Modal Sheet does not start at the bottom. I could not find a way to re-produce it exactly, but it happens often (and randomly). I thought it was a problem in my app, but I just saw that it happens in the Apple Music demo (https://temzasse.github.io/react-modal-sheet/) too.

Maybe you have to open the Modal a couple times, but it will happen definitely. Here is a Screen Recording:

RPReplay_Final1681980041.mov

It's a pretty small gap here, but it can be quite big.

This happens on Chrome and Safari. Tested multiple devices, happens everywhere.

[viktorrenkema]

Also noticing this, seems to be exactly 30px.

[adshrc]

I have found a way to reproduce it. You just need to scroll a couple pixels down from the very top of the page (and open a modal then). Seems like that it just happens when scrolling 1 to 30px. After 30px it works fine. @Temzasse why does it add a negative margin-top to the body when opening the modal? May be related to this bug...

[Temzasse]

Hi 👋🏻 Thanks for reporting this!

There is probably a bug in the sheet height calculation related to the dynamic browser viewport height. I'll try to find time and see if we can use the new dvh, lvh, svh units to fix this issue 🕵🏻

[Tomashiwa]

Hi @Temzasse, may I know if there is an update on this particular bug? Similar to adshrc, I can't replicate this reliably but it does happens now and then.

[Temzasse]

No updates unfortunately. A proper reproduction would help a lot to debug this issue. Without a repro it's just a guessing game 😅

[juvaly]

you can reproduce here (on mobile):
https://codesandbox.io/p/sandbox/wizardly-babbage-zw23km

simply swipe to scroll the page behind the sheet to make the top toolbar of the browser disappear (chrome in my case) - a gap appears below the sheet the same height of the toolbar that was just scrolled out of view.