Ionic 5 and Capacitor: notch overlap problem

Ionic Framework Ionic Angular
1

Hi everybody !

Yesterday i have updated my Ionic App from Cordova to Capacitor and after that, status bar and tab bar overlap the content.

I don’t understand why, here’s a list of thing i’ve tried:

  • Check my meta viewport and it’s correct <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  • Add body css (you can see after screenshots).

  • Remove / install iOS / update iOS / update Ionic / update all plugins

with margin
Result when i use :

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

And if i remove margin-top:
without margin

Do you have any idea ?

Finally, my ionic info output:

Ionic:

   Ionic CLI                     : 6.4.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 1.5.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res (update available: 0.11.0) : 0.9.0
   native-run (update available: 0.3.0)   : 0.2.2

System:

   ios-deploy : 1.9.4
   ios-sim    : ios-sim/9.0.0 darwin-x64 node-v13.10.1
   NodeJS     : v13.10.1 (/usr/local/Cellar/node/13.10.1/bin/node)
   npm        : 6.14.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146
2

Body one safe area should work, can you provide repo to reproduce and share in github/ionic

Btw can you share how you manage to design tab like that, i really liked that

3

Yes, this design tab is currently in progress and I think that is the problem on iOS. When i correct the last bug, i publish here a tutorial to make this design on tab navigation.

1 Like
4

webview should resize

can you try this https://webkit.org/blog/7929/designing-websites-for-iphone-x/