Closed louisameline closed 4 years ago
It looks like the Ionic folks wrote a patch for this. You need to:
cordova plugin add cordova-plugin-ionic-webview --save
<preference name="Scheme" value="https" />
<preference name="ScrollEnabled" value="true" />
ios
folder in the platforms
folder and rebuildMore info at https://github.com/ionic-team/cordova-plugin-ionic-webview
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
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
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.
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.
That's how I fix this problem.
<q-layout>
scrolling-trouble
to <q-layout>
/css/app.scss
// prevent dialog blank space
.scrolling-trouble {
overflow-y: hidden !important;
height: 1px;
}
Inspired by & Thanks @FlickerSoul
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
viewport-fit=cover just add this to your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1"/>
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:~~Which was introduced because of this: https://github.com/quasarframework/quasar/issues/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 wkwebviewposition: 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-safariTested 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.