Ionic - White edge on iPhone X in header

Question

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.

Answer 1

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.