Quasar: Empty space at the bottom of the screen on iOS with Cordova WKWebview

[louisameline]

It looks like the Ionic folks wrote a patch for this. You need to:

• remove cordova's Wkwebview plugin from your project, including cleaning your config.xml from the related entries
• install the ionic webview (which includes the Wkwebview plugin + their own improvements):
  cordova plugin add cordova-plugin-ionic-webview --save
• You'll probably want to add this in your config.xml:

<preference name="Scheme" value="https" />
<preference name="ScrollEnabled" value="true" />

• delete the ios folder in the platforms folder and rebuild

More info at https://github.com/ionic-team/cordova-plugin-ionic-webview

[louisameline]

Ionic webview works fine, but... I just found that it's currently not compatible with Firebase's SignInWithRedirect.
These talk about it:

https://github.com/firebase/firebase-js-sdk/issues/1244

https://github.com/firebase/firebaseui-web/issues/365

https://stackoverflow.com/questions/48314299/firebase-social-login-not-redirected-to-the-app-ionic-3-ios/53566771#53566771

https://stackoverflow.com/questions/52453529/firebase-ionic-cordova-signinwithredirect-redirects-to-localhost-on-android

[louisameline]

I've reverted to Cordova's WKWebView. After more investigation, it turns out that the window.innerHeight returned by the webview is at some occasions the window height MINUS the safe area inset height. It's an issue that has been reported here: https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108 and I submitted it to Webkit here https://bugs.webkit.org/show_bug.cgi?id=210009

[louisameline]

Temporary workaround: just add height: 100vh; to the html element. Not everybody has success with it however. If it doesn't work for you, you can add this at the beginning of the body in index.template.html

<div style="height: 100vh; position: absolute; visibility: hidden; width: 1px;"></div>

But this will not work whenever the body has position: fixed though, which happens for all overlays in Quasar.

One can override .q-body--prevent-scroll like this to fix it:

.q-body--prevent-scroll.platform-ios {
    overflow: hidden;
    position: relative !important;
}

But then there is an issue with scrolling in iOS, which is due to a specific hack for iOS in the Dialog plugin. It seemed ok when I disabled it as well, but it comes useful in some cases, so... Good luck if you need to search more.

[rstoenescu]

We do recommend the Ionic Webview.
Unfortunately, we did everything possible from within Quasar. If there is something that further needs to be fixed, it can only be done by Apple or by the Ionic folks with their webview.