Vuetify: [Bug Report] v-navigation-drawer append slot isn't visible without scrolling in Chrome on Android

[lol2x]

Environment

Vuetify Version: 2.1.9
Vue Version: 2.6.10
Browsers: Google Chrome, Microsoft Edge
OS: Android

Steps to reproduce

1. Open https://cdpn.io/lol2x/debug/ExxLvRX/xnMabZNVBXpr on Chrome/Edge Mobile
2. You can't see button in append slot
3. Scroll down - you can see it

Expected Behavior

This should work like in the Firefox Mobile so the append slot will be visible

Actual Behavior

Append slot in navigation drawer is not visible without scrolling

Reproduction Link

https://codepen.io/lol2x/pen/ExxLvRX

Other comments

This also breaks vuetify.com documentation on Chrome mobile (new style with controls of language, version and dark mode which are in Append slot)

[lol2x]

Debug link doesn't work, you have to fork the pen yourself

[jacekkarczmarczyk]

You've submitted an issue that does not contain a reproduction. In order to effectively disposition this, we need to verify that the problem exists outside of your environment. This issue will be tagged as needs reproduction for the next 14 days before being closed.

You can find information on how to contribute to vuetify here.

Services to create a reproduction:

• Codepen
• Codepen w/Router
• Codesandbox
• JSFiddle
• A small reproduction repository

Thank you for your contribution and interest in improving Vuetify.

[lol2x]

1. Fork this pen https://codepen.io/lol2x/pen/ExxLvRX
2. Run this in debug mode on your mobile chrome (it doesn't work on desktop chrome simulation)
3. You can't see button in append slot
   
4. Scroll down - you can see it now
   

Additional notes: Same effect you have on https://vuetifyjs.com/en/getting-started/quick-start

[lol2x]

Also probably related to #4384

[kororos]

I confirm having exactly the same issue with Vue 2.6.11 and Vuetify 2.2.3

[axwalker]

@lol2x or @kororos - did either of you find a solution to this?

[lol2x]

@axwalker I believe setting height to 100% fixes it
using 100%:

using 100vh

@johnleider is there a reason 100vh was introduced in md2? I'm unable to reproduce bug from #4384 in latest chrome versions

https://github.com/vuetifyjs/vuetify/blob/20452950e84a2593eeb0a4a7b67517f40e4f9912/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts#L72

[m-wolicki]

Any solution for this?
I have similar issue on Safari on iOS devices. Safari bar covers content in v-slot:append

[OysterD3]

Any solution for this?
I have similar issue on Safari on iOS devices. Safari bar covers content in v-slot:append

Put height to 100%
It happens to all browsers on iOS devices

[husayt]

Was trying to solve this for some time, until I found solution here. Height 100% should be set by default in app level drawers in vuetify, as it is clearly a bug.

[felicienfrancois]

Some pages related to this behavior on mobile
https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

The solution seems to be either :

• using height: 100% instead of height: 100vh
• using height: -webkit-fill-available
• dynamically setting height to window.innerHeight in javascript

[WhatFreshHellIsThis]

For anyone else unclear from reading the above, the specific workaround is a height="100%" setting on the navigation drawer element:

 <v-navigation-drawer
      v-if="isAuthenticated"
      v-model="drawer"
      app
      temporary
      width="345"
      height="100%"
    >

Doesn't help with other issues though which I just noticed due to this bug. Is this going to be a vuetify general fix or...?

[WhatFreshHellIsThis]

This is also triggering an issue with v-footer as well, any chance this will be fixed soon?