100 viewport height not working in Safari iOS 15

I’m having issues with Safari iOS 15 bottom tab.

The 100vh is ignoring the Safari tab bar.

I need the heading to be vertically centered, so I have a grid with 3 rows:

Top row: 8em for Logo
Middle row: 1 fr for Heading
Bottom row: 8em to leave room for position fixed menu elements.

It all looks great on other mobile devices with no bottom tab bar and in Safari desktop preview of iPhone.

But on the actual iPhone running iOS 15, there’s no centering happening.

This is what happens when the page loads:

If I hide the toolbar it looks good.

I want the grid to be responsive to the Safari tab bar.

How do I fix this? Below is a link to the webflow project.


Here is my site Read-Only: https://preview.webflow.com/preview/leaf-example-site2?utm_medium=preview_link&utm_source=designer&utm_content=leaf-example-site2&preview=701cb61c44fe0af83eaa28a8c68b17e1&workflow=preview