I’m having issues with Safari iOS 15 bottom tab. My previous question a user said it had already been answered [here][1]. But this doesn't solve my issue, that question was from 7 years ago and this seems like a iOS 15 specific issue.
I've tried env(safe-area-inset-bottom) but that isn't working.
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: 1fr 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.
https://i.stack.imgur.com/aYVgy.jpg
But on the actual iPhone running iOS 15, there’s no centering happening.
This is what happens when the page loads:
https://i.stack.imgur.com/chkKJ.png
If I hide the toolbar it looks good.
https://i.stack.imgur.com/Q5fhh.png
I want the grid to be responsive to the Safari tab bar.
Thanks