iOS notch safe area inconsistent behavior

Hi,
I’m having issue with ion-toolbar paddings inside the safe area of iPhone 10+. At first the webview starts where it should (window.innerHeight = 862px) and after closing and reopening the app it starts below the notch (window.innerHeight = 814px) which push all the content including the header down.

See the gif below that works at first but then shows the wrong behavior.

Config :

Ionic:

   Ionic CLI                     : 6.9.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.0
   @angular-devkit/build-angular : 0.803.29
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 3.0.0

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res (update available: 0.15.2) : 0.11.0
   native-run                             : not installed

System:

   NodeJS : v12.17.0 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina
   Xcode  : Xcode 12.1 Build version 12A7403

What could be the issue here ? Thanks for the help.

I stumbled upon this cordova issue that looks a lot like my own issue : https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108#issuecomment-607461878

I’ve just noticed that even when the body is correctly initialized (the first time) the html element is shorter (814px) than the body (862px)

First of all, sorry for the monologue.

I’ve found the solution. I had added in the past, trying to resolve another issue in Capacitor 1.x, a parameter in capacitor.config.json :

{
    ...
    ios: {
        contentInset: "always"
    }
}

This parameter is referenced here : https://capacitorjs.com/docs/config

Which caused the inconsistent bug but I cannot explain why…

4 Likes