Services Plugins FAQs

iPhone X Safe Area

Native Apps
#1

EDIT: Solved this with CSS. Thanks!

Hello! Loving zeroqode :slight_smile:

My app is looking great on iPhone 8 (left) and other normal screen sizes, but the safe area is all messed up on iPhone X (right):

The content is bleeding into the area above my “fake navbar” that is part of my web app. And ocassionally, when scrolling up, the navbar moves up with the rest of the page.

Everything is working completely fine on the iPhone 8 though.

Basically, I just want to:

  1. Lock the the web app into place on the iPhone X, so the navbar doesn’t move around

and

  1. Cover up the upper area with a color to match my navbar. I’ve tried adding other interface elements in the storyboard to cover up that area, but nothing shows up when I run it in simulator.

Any help would be much appreciated!

1 Like
#2

Hi,

Do you have this problem on Safari browser? This is something that we can’t fix on native side.

You will need to fix this with html and css. Maybe this can help:
https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Best regards

#3

Hi! Thanks for the reply!

No I do not have this problem in Safari. The content lays flush with the address bar.

I would like to achieve a similar effect in my Zeroqode app, utilizing a blank “toolbar” at the top of the screen to fill in that empty space.

Any ideas?

#4

There is a difference with Safari and our app. Our app is using WKWebView, Safari is using SFSafariViewController component that has the above toolbar. As I know, this problem is fixable with css on your website. On native side, you can only create a navbar.
Maybe this can help. https://www.youtube.com/watch?v=fF8TSrwEMiM

#5

Hey Matt, maybe this could hep also

#6

Hi @mattportner checked out the app in the Apple App Store and it looks great. How did you create your screenshots for the app?