Seamless q-dialog jumping on iOS when positioned to bottom

[CITjakob]

What happened?

When using the q-dialog with seamless and position="bottom" it lags behind the bottom browser bar of Safari when scrolling. iOS Safari increases the hight of the bottom bar when scrolling up. The q-dialog is then hidden for a moment before it jumps up. When scrolling down, the Safari bar is hidden, q-dialog jumps down after a moment.

Setting the transtion-duration to 0 does not help.

What did you expect to happen?

q-dialog moves smoothly with the bar, like any other element positioned to bottom.

Reproduction URL

https://codepen.io/Jakob-H-fflin/pen/WNBVYKb https://quasar.dev/vue-components/dialog/

How to reproduce?

1. Follow link to q-dialog page in quasar docs on iOS Safari
2. scroll down to seamless example
3. Open dialog
4. Scroll up and down to view lagging dialog

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Safari, iOS

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @CITjakob! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[CITjakob]

No, I ended up using Teleport and a regular div in my case.

On 9. Dec 2024, at 06:31, Marcus Osland-Rong @.***> wrote:

Did you find a solution or workaround to this issue @CITjakob https://github.com/CITjakob ?

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/issues/17347#issuecomment-2526970066, or unsubscribe https://github.com/notifications/unsubscribe-auth/A55GM2AFVCOFD2AAZE3LAG32EUTK7AVCNFSM6AAAAABKJCQBEOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRWHE3TAMBWGY. You are receiving this because you were mentioned.