1

Loading an app on iPhone X and I have white bars on the two sides of the notch. I am using Ionic Tabs. I have tried changing the body and ion-app background colour. 

body, ion-app.app-root {
    background-color: color($colors, main);
}

First include viewport-fit=cover

Running "cordova-plugin-statusbar": "^2.2.3"

Also tried to change Statusbar background colour with <preference name="StatusBarBackgroundColor" value="#25707B" /> Don't know what is causing them.

Edit: Added image of the white edge.

enter image description here

Xerri
  • 4,916
  • 6
  • 45
  • 54

1 Answers1

2

The status bar size has changed on iPhone X, so older versions of cordova-plugin-statusbar display incorrectly on iPhone X.

A fix was merged into the cordova-plugin-statusbar@2.3.0 release, so make sure you're using at least this version. You can check which version is installed in your project by running cordova plugin ls.

For a more comprehensive list of issues and solutions for Cordova apps on iPhone X see this answer.

DaveAlden
  • 30,083
  • 11
  • 93
  • 155
  • I installed the latest today v2.2.3 but I will check to upgrade. – Xerri Nov 26 '17 at 15:22
  • [cordova-plugin-statusbar release notes](https://github.com/apache/cordova-plugin-statusbar/blob/master/RELEASENOTES.md) – DaveAlden Nov 26 '17 at 15:23
  • ran npm i cordova-plugin-statusbar and I got 2.3.0. Removed and reinstalled cordova-ios as well. – Xerri Nov 26 '17 at 15:42