Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seamless q-dialog jumping on iOS when positioned to bottom #17347

Open
CITjakob opened this issue Jul 3, 2024 · 1 comment
Open

Seamless q-dialog jumping on iOS when positioned to bottom #17347

CITjakob opened this issue Jul 3, 2024 · 1 comment

Comments

@CITjakob
Copy link

CITjakob commented Jul 3, 2024

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

@CITjakob CITjakob added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Jul 3, 2024
Copy link

github-actions bot commented Jul 3, 2024

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. 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant