search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.64k stars 6.95k forks source link

[Bug Report][3.5.11] Content behind v-navigation-drawer scrolls #19477

Open telmaantunes opened 5 months ago

telmaantunes commented 5 months ago

Environment

Vuetify Version: 3.5.11 Vue Version: 3.4.21 Browsers: Chrome 122.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Open the drawer and scroll

Expected Behavior

The content behind the drawer should not scroll, especially if the options temporary or scrim are used, because they add an overlay.

Actual Behavior

The content behind the drawer scrolls.

Reproduction Link

https://play.vuetifyjs.com/#...

telmaantunes commented 5 months ago

Or if the drawer also has scroll: reproduction link.

frederikheld commented 2 weeks ago

I'm living with this bug for way too long, so I'm very happy to see progress.

Today I also noticed that not only the content behind the nav drawer scrolls, but the scrim scrolls with it. So scrolling up while the nav drawer is open moves away the scrim.

This might be related to the fact that I decided to not use v-main because it's magic causes too many issues for me. Unfortunately there's no documentation whatsoever about what v-main is actually doing (API docs, Component docs), so I can't determine if using it has more upsides than it causes trouble.

This might be one of the troubles of not using it but I did not investigate further as I found a temporary fix, so it could be an entirely different issue as well. I'm just leaving this here as it might be related to this issue.

My temporary fix is putting this into App.vue:

:deep(.v-navigation-drawer__scrim) {
  position: fixed;
}