How to remove the white space at iPhone X top viewport corners on ionic cordova

Question

I followed the instructions here Understanding the WebView Viewport in iOS 11 and here Cordova app not displaying correctly on iPhone X (Simulator) to set viewport-fit to cover etc. But I still can't seem to get rid of these white corners on the top:

What am I missing?

ionic (Ionic CLI)     : 3.15.2
cordova (Cordova CLI) : 7.1.0
Cordova Platforms     : ios 4.5.2
Ionic Framework       : ionic-angular 3.8.0

Are you using `xcode 8 or 9`? – Sampath Nov 04 '17 at 17:50 — Sampath, Nov 04 '17 at 17:50

score 11 · Accepted Answer · answered Nov 06 '17 at 08:23

11

Eventually figured it out myself. In case anyone else has the same issue, here's what did the trick for me:

ionic cordova plugin rm cordova-plugin-statusbar

ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

answered Nov 06 '17 at 08:23

Ben

2

This should have more votes, really fixing the issue. – Arsen Khachaturyan Dec 13 '17 at 15:22
Helped to remove the white spaces, but now the screen is way too much at the top and way too much overlapping at the bottom. Any way to "shrink it"? – Dimitri Dec 21 '17 at 15:54
It hasn't helped me, I've added a comment to the above-noted github thread. – Dimitri Dec 25 '17 at 21:44
Sometimes after a `cordova platorm rm ios && cordova platform add ios` the status plugin revert and you need to run the above commands. It took me a few hours to find this answer today :/ – Jacksonkr May 20 '19 at 23:37

score 1 · Answer 2 · edited Jan 10 '18 at 08:02

Make changes in css .Add this code with existing code like

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

If you use toolbar button then go with:

.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}

Solution:

2 Answers2