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

[louisameline]

Describe the bug

The bug is the white space at the bottom of the screenshot below. The bottom-sheet and its dark underlay should reach the bottom of the screen.

Remarks
This happens because of this property:

.q-body--prevent-scroll
  .q-layout
    position: fixed

Which was introduced because of this: #4497
It's solved as soon as I disable position: fixed. I fiddled with "height: 100%", "bottom: 0" etc. but couldn't find a way to work around this wkwebview position: fixed bug.
I suggest to try an alternate way to prevent scrolling, as described on https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari
Tested on a real iPhone XS, with iOS 13.3.1
Happens with or without any cordova plugins installed.
It does not happen when using Capacitor, or Android, or in a browser.

Note: strangely, the bug no longer happens after the device is rotated at least once.

[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:

firebase/firebase-js-sdk#1244

firebase/firebaseui-web#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: apache/cordova-plugin-wkwebview-engine#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.

[jukrb0x]

That's how I fix this problem.

1. Find out where is the scrolling bar, for me, it's <q-layout>
2. Add new class scrolling-trouble to <q-layout>
3. Add the following snippet to global stylesheet, for me, it's in /css/app.scss

// prevent dialog blank space
.scrolling-trouble {
  overflow-y: hidden !important;
  height: 1px;
}

Inspired by & Thanks @FlickerSoul

[SameerInstacash]

ionic cordova plugin rm cordova-plugin-ionic-webview
ionic cordova plugin add cordova-plugin-ionic-webview@latest

Try this, I fixed same issue using above link

[sylvinrodz]

viewport-fit=cover just add this to your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1"/>