Streaming live at 10am (PST)

Custom Code for iPhone X VH display


#1

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.


#2

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).