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

q-layout causes flickering scroll bar when resizing window. #5932

Closed
awulkan opened this issue Dec 21, 2019 · 2 comments
Closed

q-layout causes flickering scroll bar when resizing window. #5932

awulkan opened this issue Dec 21, 2019 · 2 comments

Comments

@awulkan
Copy link

awulkan commented Dec 21, 2019

Describe the bug

For some reason the q-layout component modifies its min-height css style when you resize the browser window. This causes the scroll bar to flicker since the min-height becomes larger than the max height of the window when shrinking the window. This not only causes an annoying flickering scroll bar, but it also pushes all of the website content to the left every time the scroll bar flickers.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new Quasar project.
  2. Launch it in the browser.
  3. Resize the height of the browser window with your mouse.

Expected behavior

No scroll bar should show up, and definitely not flicker.

Screenshots

https://www.loom.com/embed/2082371d03b743ba85c7937c6833abef

Platform (please complete the following information):
OS: Windows 10
Node: 13.5.0
NPM:
Yarn: 1.21
Browsers: Chrome 79
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

@pdanpdan
Copy link
Collaborator

pdanpdan commented Jan 7, 2020

It's a trade off between layout responsiveness and load. If in your case resizing the window is so frequent that it's creating problems you can set Screen's plugin debounce to 0 to have instant updates.
Just put this.$q.screen.setDebounce(0) in you App.vue in mounted () { ... } (see docs here: https://quasar.dev/options/screen-plugin#Configuration)

@CrawfordW
Copy link

That solved it for the main window, but I still get it in the drawer.

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

4 participants