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
With simple restart of your iPhone, the "white dot on the top left corner of iPhone screen" issue might get solved. Restart always helps to solve many problems. So we recommend you to try it for this issue too. For the time being, only steps for iPhone 11 and iPhone SE (2nd generation), 8, 7, or 6 are provided here.
We would recommend duplicating the relevant page and delete sections until the white space disappears. When you find the section, try to disable “Stretch Section” under Layout. And make sure you don’t have a fixed width on this section or underlying inner sections and elements.
There are three main things you can do in Elementor to fix this. We would recommend duplicating the relevant page and delete sections until the white space disappears. When you find the section, try to disable “Stretch Section” under Layout.
There might be white space on mobile view for certain pages or templates when the cookie banner is enabled. This is due to the fact how Complianz calculated the width of the page. When the page has an element that is stretched with javascript or not responsive a white space might occur.
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:
more help available at cordovo apache
stackoverflow solution
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With