0

I built a hybrid app using Ionic 4. The app is working great in most devices but a strange bug is showing in iPhones with nodge like iPhone 11 or X.

enter image description here enter image description here

I want to remove these top and bottom spaces. Things i have tried:

  • this.statusBar.overlaysWebView(true); in the initializeApp()
  • Add viewport-fit=cover to the viewport meta tag in index.html
  • Update the Status bar plugin (cordova-plugin-statusbar)
  • Add status bar directly from the github repo instead of the Ionic plugin
  • Add safe-area-inset variables in Ionic css
  • Try storyboard splash screens
  • Add the status bar plugin directly from the Github repo: ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
  • Adding safe area
body{
    padding-top: constant(safe-area-inset-top);//for iOS 11.2
    padding-top: env(safe-area-inset-top);//for iOS 11.1
}

Can i paint it black? It's working like this in Android nodge like Pixel xl.

Ricki
  • 81
  • 11
  • 1
    Does this answer your question? [How to remove the white space at iPhone X top viewport corners on ionic cordova](https://stackoverflow.com/questions/47113436/how-to-remove-the-white-space-at-iphone-x-top-viewport-corners-on-ionic-cordova) – Najam Us Saqib Oct 31 '19 at 08:20
  • Thanks, but didn't work. I also made sure to remove and re-add the ios platform just in case, but no luck. I'm adding this to the tried things list. – Ricki Nov 02 '19 at 06:21
  • @RicardCreagia did you find any solution for this? – hardiksa Jun 01 '20 at 13:43

0 Answers0