Safari iPhone chin covering the bottom

[Antoine-lb]

Hello 👋

When the modal has a long content the bottom is covered by the new iOS Safari chin (now iPhones display the URL at the bottom).

There is two pictures, one is a regular one, and the second is when you scroll down a little, the chin desapears, but a weird block still covers the bottom only when you open the modal.

I don't really now if this is a Safari bug or not, I just wanted to leave it recorded.

[Antoine-lb]

It comes from the position: fixed that is applied to the body every time the modal is opened, when I turn it off it works great.

What is the purpuse of this CSS rule? because I don't see anything odd when I turn it off

[flekschas]

Thanks for reporting! Did you try scrolling the background after you removed position: fixed? I suspect you can, which shouldn't be the case.

[Antoine-lb]

It does not scroll on my devices (iPhone and MacbookPro Firefox).

If you want to try it yourself: https://menu-poc.vercel.app/test (you have to scroll down a little until finding the "Open Modal" button somewhere in the middle)

Edit: I did manadge to scroll on the iPhone, but for now I will keep body position: static !important; because the chin feels more disturbing to me than the scroll

[flekschas]

I can scroll the page in the page in the background just fine when the modal is opened on my iPhone (iOS 15.3). That's also the reason position: fixed was added if I remember correctly.

[flekschas]

There might be a solution to the issue you described that does not require position: fixed to be changed.

Can you test replacing

  height: 100vh;

with:

  min-height: 100vh;
  min-height: -webkit-fill-available;

for .bg?

You can just copy the code from this example where I adjusted the CSS: https://svelte.dev/repl/ed4c1a7c00ae4be8b1825b8641dff5d9?version=3.46.4

It seems to work for me on Chrome, FF, and Safari (macOS + iOS), but more testing is always good.