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
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
Refer to: https://github.com/apache/cordova-plugin-statusbar/pull/85
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: