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

QDrawer scrollbars blink infinitely on some resolutions #10281

Closed
1 of 7 tasks
zeroinformatique opened this issue Aug 4, 2021 · 6 comments
Closed
1 of 7 tasks

QDrawer scrollbars blink infinitely on some resolutions #10281

zeroinformatique opened this issue Aug 4, 2021 · 6 comments
Labels

Comments

@zeroinformatique
Copy link

Describe the bug
The QDrawer component sometimes make native scrollbar appears (in addition to its own internal, stylized, scroll). On some resolutions or zoom-levels, it will start to blink in-and-out infinitely at 2 FPS.

Codepen/jsFiddle/Codesandbox (required)
You can reproduce this bug on your own documentation website:
https://quasar.dev/vue-components/stepper
The drawers on the left and on the right of the page may trigger this effect.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://quasar.dev/vue-components/stepper
  2. Play with CTRL + and CTRL - to zoom-in and zoom-out
  3. You may see the native scrollbar pop in for a fraction of a second (this is not normal)
  4. Eventually, if you insist at different resolutions and zoom-levels, it will start blinking and never stop

NOTE: On FireFox, I get to step 3 (which is still not normal). On Chrome, I get to step 4.
I suggest testing for this issue on Chromium for easier reproduction.

Expected behavior
The native scrollbar should never appear, especially because this component has its own, stylized, internal scroll.
A workaround is to add the css-class no-scroll on the QDrawer component; it fixed the issue for me.

Screenshots
image
image

Platform (please complete the following information):
Quasar Version: 2.0.3
@quasar/app Version: 3.0.3

Quasar mode:

  • SPA
  • SSR
  • PWA
  • Electron
  • Cordova
  • Capacitor
  • BEX

OS:
Node: 12.22.4
NPM: 6.14.14
Yarn: 1.22.11
Browsers: Chrome 92, FireFox 90

Additional context
Add any other context about the problem here.

@Evertvdw
Copy link
Contributor

Evertvdw commented Nov 8, 2021

@zeroinformatique I had this same problem but I believe this is happening due to subpixel window heights. I have it for instance on certain heights when using a 4k monitor with 150% zoom (in windows desktop settings). Are you using a zoom at desktop level also?

@hawkeye64
Copy link
Member

I also have seen this when using a zoomed of 200% and 125%

Once I removed the zoom, the issue went away. This is indeed a sub-pixel issue with the browsers.

@zeroinformatique
Copy link
Author

zeroinformatique commented Nov 8, 2021

Are you using a zoom at desktop level also?

@Evertvdw I use 125% DPI for my screens, yes.

@hawkeye64
Copy link
Member

I am also curious if this only happens when you have Chrome Dev Tools opened?

@Evertvdw
Copy link
Contributor

@hawkeye64 No, it happens on the PWA installed app om desktop for me too

rstoenescu added a commit that referenced this issue Jan 7, 2022
@rstoenescu
Copy link
Member

Fixed it in Quasar v2.4.4 & v1.17.1 (to be released)

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

No branches or pull requests

4 participants