1

Had some great help and feedback in my last Cordova question about status bars in general and now I've hit a snag with the new iPhone X on iOS 11.0

I've read this thread : https://issues.apache.org/jira/browse/CB-12886

People highlighting the issue where a white bar appears online on the X running 11.0 but not on other devices (I've tried 6,7,8) and the solutions the threads posted along I've tried too including;

  1. ionic web view plugin.

  2. meta tag <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

  3. wkwebview engine plugin

I just can't seem to get it to fit properly on the iPhone X and I know its something I need to address if an app is to be accepted by apple.

Running latest public version of Xcode and all the simulators are running iOS 11.0, I use OnSen as the UI elements and I've currently got the ionic web view plugin, network info plugin, whitelist and oneSignal plugin installed and nothing else.

Appreciate any and all help

Images to show what I mean : Iphone X

enter image description here

Rlemm1991
  • 505
  • 1
  • 7
  • 20

2 Answers2

0

Do you updated your cordova-plugin-splashscreen Launch Screen File yet?

According to this topic: Cordova app not displaying correctly on iPhone X (Simulator) , you must sure you splashscreen size is the correctly for each, after that you gap should be gone.

Hope this help.

Yuk_dev
  • 318
  • 1
  • 6
  • 16
  • I have not,didnt realise this was the an issue? read through that topic yesterday and I was under the assumption the storyboard fix mentioned was purely for the black parts of the app not the gap in question – Rlemm1991 Nov 01 '17 at 07:39
  • @Rlemm1991 I don't really know how splash screen will related to screen size for app view, but I also face your problem before i update this plugin launch image size . Seems like iOS will get your splash screen size to handle how big for you app screen size, if you provide the largest size for it, it will automatically change for you. – Yuk_dev Nov 01 '17 at 08:48
  • its okay now I've found the source of the problem and it doesn't relate to it turns out its a UI & CSS issue with onsen ui – Rlemm1991 Nov 01 '17 at 09:14
0

So I found the solution turns out my issue is with OnSen UI not with the web view as originally thought.

viewport-fit=cover

Does fix this issue and sorts out the screen gap and the solutions presented in the thread Cordova app not displaying correctly on iPhone X (Simulator) all work.

For anyone like me who is using or used OnSen UI that ons-page tag is causing the the gap between status bar and content, modifying the css for testing purpose to

<ons-page style="position: absolute;top: -20px;">

removed the white bar and pushed the content up, albeit at the expense of every other device but its a starting for me.

So everyone else who's a CSS wizard will know how to fix this properly

Rlemm1991
  • 505
  • 1
  • 7
  • 20
  • I should also note @Yukwong Tsang was correct in his information about the splash screen plugin, it forced the iphone X into native resolution with the webview i will add my solution in the next comment .... – Rlemm1991 Nov 02 '17 at 07:50
  • Onsen UI have detailed in a report (https://github.com/OnsenUI/OnsenUI/issues/2196) the issue and their solution using ons.platform.isIphoneX(), i tacked this on the device ready function to load an alternative css which then used the suggestions in a topic link in the answer below to push the bars into place and use the safe zones – Rlemm1991 Nov 02 '17 at 07:52