Can anyone provide some guidance on how to properly account for the “notch”/tab menu on the bottom of the iPhone X when trying to display something 100% VH? Currently custom navigation I have for mobile is being blocked out by the Tab menu, and I’m looking for a solution that makes it “fit” to the bottom of the screen…but above the Tab Menu in Safari.
I hope that makes sense. Any and all input/direction would be greatly appreciated.
Can you provide a screenshot of the issue please? I get it but I don’t get why it’s an iPhone X issue… I think it’s a browser issue. Safari mobile, especially, is a hell to work with when it comes to fullscreen sections, and I don’t know a solution for that yet. Safari has mobile panels for URL and menu, they come and go as you scroll up or down. It’s properly impossible to fit a 100vh section in between them because those mobile things are part of the viewport. Apple does this so you have a bigger screen estate for your sites. As a user, I love it, as a developer, I hate it. Chrome has the same exact behavior on iOS (a little more jiggy, a little less predictable).