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

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

Open
telmaantunes opened this issue Mar 26, 2024 · 2 comments
Open

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

telmaantunes opened this issue Mar 26, 2024 · 2 comments
Assignees
Labels
C: VNavigationDrawer T: bug Functionality that does not work as intended/expected
Milestone

Comments

@telmaantunes
Copy link

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
Copy link
Author

Or if the drawer also has scroll: reproduction link.

telmaantunes added a commit to telmaantunes/vuetify that referenced this issue Mar 26, 2024
Replace scrim with v-overlay component, which fixes the scroll issues

fixes vuetifyjs#19477
telmaantunes added a commit to telmaantunes/vuetify that referenced this issue Mar 26, 2024
Replace scrim with v-overlay component, which fixes the scroll issues

fixes vuetifyjs#19477
telmaantunes added a commit to telmaantunes/vuetify that referenced this issue Mar 26, 2024
Replace scrim with v-overlay component, which fixes the scroll issues

fixes vuetifyjs#19477
johnleider pushed a commit to telmaantunes/vuetify that referenced this issue Mar 30, 2024
Replace scrim with v-overlay component, which fixes the scroll issues

fixes vuetifyjs#19477
@johnleider johnleider self-assigned this Mar 30, 2024
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VNavigationDrawer and removed S: triage labels Mar 30, 2024
@johnleider johnleider added this to the v3.5.x milestone Mar 30, 2024
@johnleider johnleider modified the milestones: v3.5.x, v3.6.x Apr 30, 2024
@KaelWD KaelWD modified the milestones: v3.6.x, v3.7.x Aug 15, 2024
@frederikheld
Copy link
Contributor

frederikheld commented Aug 30, 2024

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;
}

@johnleider johnleider assigned KaelWD and unassigned johnleider Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VNavigationDrawer T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants