I have an app I’ve created in Bubble, and bookmarked via Safari, with the “Hide Safari UI Component” selected so it looks like a native app.
Unfortunately, the iPhoneX notch is making life difficult. My content is visible above the header when it shouldn’t be (do not have this problem on desktop or without the hide UI component selected.
Any help on how to make the notches the same color as my header, and opaque so we can’t see scrolling content?
Ya, I studied that thread pretty closely, and ultimately didn’t find a clear answer/resolution (or at least one that worked for me). One thing that works is moving the entire header down by 20 or 30px, but then it looks strange on an iPhone non-X (i.e. web, tablet, etc), and also I have to change all of my page sizes (not as big a deal as the former)
There is this grey bar at the bottom, that goes right through the text of my tab navigation.
Native apps apparently take care of it by increasing the height of the tab navigation and shifting icons and texts up by a bit (see image below):