Quasar: Hidden q-drawer slows down scrolls on any element inside the app significantly

[HunderlineK]

Describe the bug
I have some overflowed divs which can be scrolled along the x axis. Scrolling by touch is smooth if I don't use q-drawer; however, it becomes janky once I add q-drawer.

Platform (please complete the following information):
Android: Chrome 83 on Android 10

---

I am not sure exactly how touch handler is working on q-drawer and why it slows down the scroll and if no-pointer-events still intercepts the touchs and just ignores them or what; however, looking at it differently, the issue is that the backdrop takes the whole screen in the first place even if drawer is closed.

Current behavior: drawer backdrop takes the whole screen even if drawer is closed and no-swipe-backdrop is set true (it seems currently it's just sent to back by modifying its z-index?)

Expectd behavior: drawer backdrop should not be displayed (display: none) if drawer is closed and no-swipe-backdrop is enabled

(I'd say since how big of a performance hit this is, probably in the next major revision no-swipe-backdrop should be turned on by default if the performance can't be improved without removing the backdrop from display)

[pdanpdan]

Hello.
If in the above situation you set display: none on the backdrop do you get a speed improvement?

[pdanpdan]

Please do a small test form me: replace in package.json "quasar": "^1...." with "quasar": "https://github.com/pdanpdan/quasar#quasar-v1.12.8-test.2" and report here if it fixes the problem.

Cleanup node_modules and yarn.lock / package-lock.json and do yarn/npm install.

[HunderlineK]

@pdanpdan Yes, I add this to my app.sass and it fixed the issue!

.q-drawer__backdrop.no-pointer-events
  display: none

I will try the other approach later after work and will let you know, thanks!

[HunderlineK]

@pdanpdan Trying to use the repository, it says: pathspec 'quasar-v1.12.8-test.2' did not match any file(s) known to git I believe there is no branch with that name on your repository.

[pdanpdan]

sorry,
"quasar": "https://github.com/pdanpdan/quasar#quasar-v1.12.8-test.2-gitpkg"

[HunderlineK]

@pdanpdan I tried with the updated package; it doesn't fix the issue; however, I checked the layers and it doesn't show up as a potential slow down there; so 🤷‍♂️ 'display: none' definitely does work though. I still don't understand fully how Quasar components are implemented, otherwise I'd create a pull request to set .q-drawer__backdrop.no-pointer-eventsdisplay: none.

Thanks for looking into it though; I'd say unless we can implement 'display: none' we can close the issue, since I don't have any evidence e.g. a recording to confirm 100% what's going on here.

[pdanpdan]

Please leave it open, we have to think of something to solve this.
The problem with display none is that you lose the bg gradient when you open the drawer in mobile mode.

[HunderlineK]

@pdanpdan Sure, thanks! Can't we set it to none only if the drawer is closed?

[pdanpdan]

No. I have to do some research

[pdanpdan]

Hi, can you please check again with
"quasar": "https://github.com/pdanpdan/quasar#quasar-v1.12.8-test.4-gitpkg"
?

[HunderlineK]

@pdanpdan Just checked, it's fixed, thanks!!

[pdanpdan]

Thank you for checking :)

[webnoob]

Available in 1.12.9