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.

Edward

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

Cheers!

Ok, so I managed to fix this on my app. Its a little messy and it uses the responsive engine but it works on browser and native.

  1. Make page “align to parent”
  2. Create a top hat bar shape in your header
  3. Make the negative margin for the top hat the same as the height of the top hat.
  4. align the header to the top
  5. tweak it till it works.

Hope that helps someone

what is a “top hat bar shape”?. Are you able to post screen captures of your solution? Any help would be appreciated.

Sure, Here is a video explaining the solution. Brave Browser - My-list-114 | Bubble Editor - Descript
Here is a video from my phone showing the effect. One thing to note is that because I have dark mode on my phone turned on, the UI components in the notch are white… so that was the reason I used the blue tophat. https://drive.google.com/open?id=1JcrtUSDx2i5nJEFqKZneuvb3tVeyTVAd