Vuetify: [Bug Report] Snackbars in bottom not showing in Android Chrome when the search bar is visible

[miki95]

Environment

Vuetify Version: 2.3.3
Vue Version: 2.6.11
Browsers: Google Chrome
OS: Android

Steps to reproduce

In Android Chrome, open a snackbar with bottom property, it doesn't appear in screen until you scroll down (hide the search bar).

Expected Behavior

It should appear always on screen, even with search bar

Actual Behavior

It doesn't show with search bar

Reproduction Link

https://codepen.io/eremir/full/oNbpWRm

[btakakho]

Same problem. Seems issue with height: 100vh in VSnackbar.scss line 21

__VSnackbar.scss__

  &:not(.v-snack--absolute)
    height: 100vh
    position: fixed
    z-index: $snackbar-z-index

Also I've tested bottom snackbar in different mobile browsers:
Android Opera - wrong
Android Chrome - wrong
Android Firefox - ok
IOS Chrome - wrong
IOS Safari - ok
IOS Firefox - ok

[btakakho]

For now as a workaround I pass prop absolute and wrap v-snackbar with position fixed div

__vue__

<div class="snackbar-wrapper">
  <v-snackbar v-model="snackbar" absolute>
    Whooaaa!
  </v-snackbar>
</div>

__css__

.snackbar-wrapper {
  position: fixed;
  height: 100%;
  width: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 1000; // <-- For my case
}

[mishamosher]

Same problem. Seems issue with height: 100vh in VSnackbar.scss line 21

VSnackbar.scss

  &:not(.v-snack--absolute)
    height: 100vh

Tried 100% instead of 100vh and now it renders correctly on Chromium & Firefox, all platforms.

Edit

Inspecting VSnackbar.ts reveals that snackbars are always rendered with a div tag.

This makes it easy to add a CSS rule with more specificity to overwrite the height:

div.v-snack:not(.v-snack--absolute) {
    height: 100%;
}