I'm struggling with a problem for a couple hours now. The env(safe-area-inset-bottom), env(safe-area-inset-top) etc. all keeps being 0px on safari 15. I tried to console.log them to keep track of changes, but the only change happens when I switch to landscape mode. When I switch back to portrait, all the values are back to 0px. I already tried the viewport-fit=cover etc. Please someone help!
env(safe-area-inset) always 0px when in portrait mode
I'm having the exact same issue, confirmed by console.logging the safe area using this post: https://stackoverflow.com/questions/47112393/getting-the-iphone-x-safe-area-using-javascript. All safe area insets are 0px when in portrait mode, but work as expected when I rotate my phone to landscape. I have an iPhone 13 pro max.
What is more important the issue persists in landscape mode when you click "Hide Toolbar". The value will also be 0 which is critical (in my case iPhone 12 pro, ios 17.4.1). I recommend not using this property at all, instead hardcode the bottom padding/margin for iOS devices (only in case of bottom safe area).