benuuts
benuuts

Reputation: 119

Ionic capacitor WKWebView inconsitent viewport height

I'm having issue with my app viewport being inconsistent after closing/reopening it on iPhone 10+.

At first the viewport starts where it should (top of the screen with window.innerHeight = 862px) but after closing (not entirely) and reopening the app it is positioned below the notch (window.innerHeight = 814px) which push all the content including the ionic-toolbar with safe areas down.

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

https://thumbs.gfycat.com/ValidDampKiwi-mobile.mp4

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
   @capacitor/android : 1.5.1
   @capacitor/ios : 2.4.2 # bumped to support iOS 14


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.

Also this issue looks a lot like mine : https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108#issuecomment-607461878

Upvotes: 2

Views: 1744

Answers (1)

benuuts
benuuts

Reputation: 119

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...

Upvotes: 2

Related Questions