Forum Academy Marketplace Showcase Pricing Features

iPhone X notch causing problems with native apps

Hey all,

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?

Thanks very much.


Hey Edward, don’t know a solution but this also happens on other iPhones , only then the gap is smaller at the top…

Anyone else have thoughts or ideas here?

Anyone? Or am I alone in a cold universe (or simulation)?

Someone else also faced a similar issue - iOS 11 Webview Viewport leaves 20 pixel white strip at top of page

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)

Similar issue here, but then not at the top, but at the bottom.

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

Anybody with an idea how to solve this (potentially using conditional formatting?)