Scrollbar blinking in QScrollArea in drawer after scrolling down to the end

[gkraser]

Scrollbar blinking in QScrollArea in drawer after scrolling down to the end.

Reproduced in Chrome (last version). In Firefox - all ok.

To Reproduce

1. Go to https://quasar.dev/layout-builder
2. In right drawer: scroll down to the end.
3. See problem

Screenshots

Animated gif screenshot

Platform
Quasar Version: 2.2.2
Windows 10
Chrome 95.0.4638.69

[MilosPaunovic]

Check out this discussion with the same problem #11062

[gkraser]

Check out this discussion with the same problem #11062

Unfortunately, this did not solve my problem

[pdanpdan]

Are you using zoom on windows? (HiDPI or how it is called?)

[gkraser]

I have reproduced this problem in my application. This is how it looks like:

animated gif

[gkraser]

Are you using zoom on windows? (HiDPI or how it is called?)

Windows 10, screen resolution: 1920x1080, scale 125%

[gkraser]

The header uses components that have dimensions in em/rem. As a result, fractional numbers in sizes px are obtained.

in chrome:

• body: 471.200
• header: 64.237
• page container: 405
• $q.screen.height: 471

in firefox:

• body: 471.2
• header: 64.25
• page container: 406
• $q.screen.height: 471

page container height different in chrome and firefox

[robfordww]

@gkraser I can confirm the problem on my newly installed win11 laptop with chrome.

[vneznaikin]

is there a way to override the layout calculation? I found the only solution to change the values through "nextTick". but this is a not good solution. more like a temporary crutch

my temporary solution:

mounted() {
    this.$nextTick(() => {
      this.$refs.qLayout.$el.style.minHeight = "100vh"
    })
  },

do not forget add qLayout ref
and you also need to add resize listner

UPDATE:
nextTick it's bad solution

<q-layout view="hHh lpR fFf" style="min-height:100vh">
...
  <router-view style="margin-top:-1px"/>

little bit better but still not so good

[birkanucan]

I have reproduced this problem in my application. This is how it looks like:

animated gif

I also observe this behaviour on quasar.dev (sections that have q-drawer-container on the right side e.g. https://quasar.dev/vue-components/ajax-bar)
I'm on win 10, 4k, scale: 150%. I see it on chrome and edge when window is maximized and on certain points when I drag and change window size from the corner, doesn't seem to happen on firefox dev edition at all.
It stops blinking when I remove scroll from "q-drawer__content fit scroll" on devtools and removal doesn't seem to break it.

[hawkeye64]

I have reproduced this problem in my application. This is how it looks like:
animated gif

I also observe this behaviour on quasar.dev (sections that have q-drawer-container on the right side e.g. quasar.dev/vue-components/ajax-bar) I'm on win 10, 4k, scale: 150%. I see it on chrome and edge when window is maximized and on certain points when I drag and change window size from the corner, doesn't seem to happen on firefox dev edition at all. It stops blinking when I remove scroll from "q-drawer__content fit scroll" on devtools and removal doesn't seem to break it.

I think you can just remove scroll. Does your drawer also contain a QScrollArea?

[birkanucan]

I'm not working on an application, the comment I've quoted is not mine. 😅 I was just checking the docs (quasar.dev) and came upon it. But yes, it seems it does. https://i.imgur.com/FiINF4L.gif

[hawkeye64]

What your zoom level for your monitor?
@birkanucan

[hawkeye64]

Nvm, I see it above

[rstoenescu]

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

[gkraser]

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

Thank you, it works correctly!