Q-Dialog displays a blank when opened (on iOS 15)

[ozelotdev]

Describe the bug When displaying a dialog with scrolling, a blank space is displayed. This happens only on iOS 15, not on iOS 14.

Codepen/jsFiddle/Codesandbox (required) Editor: https://codesandbox.io/s/happy-hamilton-4dgh5?file=/src/pages/Index.vue Viewer: https://4dgh5.sse.codesandbox.io/

To Reproduce

1. Open Codesandbox.
2. Scroll down a little and shrink the address bar in Safari.
3. Click 'Show Dialog' button.
4. See bug.

Expected behavior Spaces are not displayed.

Screenshots

Platform (please complete the following information): Quasar Version: v2.3.2 @quasar/app Version: v3.1.0

Quasar mode:

• [X] SPA
• [ ] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

Tested on:

• [X] SPA
• [ ] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

OS: Node: NPM: Yarn: Browsers: Safari iOS: 15.1 Android: Electron:

Additional context This issue can only be reproduced on iOS15.

[preetamslot]

this bug also happens with the q-drawer component.

[preetamslot]

it seems to be related to the .q-body--prevent-scroll

If you force the body to be relative position on IOS, the space at the bottom will not be visible. it is not a fix but maybe it helps.

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

[joppehoekstra]

Same issue here on iOS 15.1.

Fix by @preetamslot seems to resolve the issue (both for dialog & drawer).

Thus far no negative side effects. Though the there is a bit of a strange glitch when scrolling in a maximised dialog (when the Safari menu shrinks & grows), but this is definitely more tolerable than having an empty space there permanently.

[NEOdinok]

Issue is still present. None of the solutions above solve issue but introduce more bugs with scrolling

[kevineduardo]

This bug still present with iOS 17.5.1, I could "half" fix the issue with the following CSS:

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

It's a half fix, because the scroll gets bugged, so, fix the blank space, but get random scrolling when opening the Q-Dialog. I didn't find the issue on Android or PC.