iPhone X Status Bar issue in Ionic 1.x app

ionic-v1
1

Everything in my app is working as expected in iOS 11, except that I cannot get rid of this white space on the iPhone X model in the simulator. I’ve added the viewport-fit=cover meta tag, updated to the most recent cordova-plugin-statusbar version (2.2.3) and cordova-plugin-ionic-webview version (1.1.15), added the new required image sizes (e.g. 2732px splash), and even tried tweaking the default CSS via overrides. See image and package.json below. I’d really appreciate any tips for solving this one. Thanks.

01 PM
Screen Shot 2017-10-10 at 4.24.01 PM.png2444×314 160 KB 

{
    "version": "1.1.1",
    "dependencies": {
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-google-analytics": "~0.9.0",
        "cordova-plugin-ionic-webview": "^1.1.15",
        "cordova-plugin-statusbar": "^2.2.3",
        "gulp": "^3.5.6",
        "gulp-concat": "^2.2.0",
        "gulp-minify-css": "^0.3.0",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^2.0.4"
    },
    "devDependencies": {
        "bower": "^1.3.3",
        "gulp-util": "^2.2.14",
        "shelljs": "^0.3.0"
    },
    "cordovaPlugins": [
        "cordova-plugin-console",
        "cordova-plugin-device",
        "ionic-plugin-keyboard",
        "cordova-plugin-keyboard",
        "cordova-plugin-whitelist",
        "cordova-plugin-google-analytics"
    ],
    "cordovaPlatforms": [
        "android",
        "ios"
    ],
    "cordova": {
        "plugins": {
            "cordova-plugin-google-analytics": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-device": {}
        },
        "platforms": [
            "android",
            "ios"
        ]
    }
}
2

Apparently you still need to get the status bar plugin directly from Github at this point. I thought that fix had already been merged but I was wrong.

ionic cordova plugin rm cordova-plugin-status-bar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar

This fixed my issue with the white space so now it’s just about tweaking the CSS to add some padding.

1 Like
3

The new version of cordova-plugin-status-bar messes up the android status bar