Vuetify: [Bug Report] v-bottom-nav doesn't push up correctly on iPhone X

[daviesdoclc]

Versions and Environment

Vuetify: 1.4.4
Vue: 2.5.22
Browsers: Safari
OS: iOS

Steps to reproduce

I'm creating a Cordova hybrid app. If I create a v-bottom-nav fixed to the bottom of the screen

            <v-bottom-nav value="true" app>
                <v-btn color="#ae2573" flat>
                    HOME
                    <v-icon>home</v-icon>
                </v-btn>
                <v-btn color="#ae2573" flat>
                    READING LIST
                    <v-icon>library_books</v-icon>
                </v-btn>
                <v-btn color="#ae2573" flat>
                    SEARCH
                    <v-icon>search</v-icon>
                </v-btn>
            </v-bottom-nav>

it gets covered up on an iPhone X with the safe area (see image1).

If I then put the necessary css as suggested (https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493)

    .v-bottom-nav {
        margin-bottom: constant(safe-area-inset-bottom); /* move footer up on iPhone X - iOS 11.0 */
        margin-bottom: env(safe-area-inset-bottom); /* move footer up on iPhone X - iOS 11.2 */
    }

then it does push it up (see image2), however the content is shown below it. I think the navbar needs to cover this area with the same background color.

Expected Behavior

Content shouldn't show below navbar.

Actual Behavior

Content shows below navbar.

Reproduction Link

https://codepen.io/funkyvisions/live/OdgqQE

[peterforeman]

Adding style="height: auto;" to the v-bottom-nav element (overriding the height: 56px;) fixes this for me.

[FryDay]

Did you try adding the margin-bottom to body instead of the component?

[FryDay]

Or better yet, use padding instead.

[pizzapanther]

I didn't use the bottom bar, however, I'm using Vuetify for a Capacitor/Cordova app and had similar issues. I used the following CSS to fix. It would be nice to have a utility for this.

body.native {
  .v-navigation-drawer {
    top: env(safe-area-inset-top) !important;
    left: env(safe-area-inset-left) !important;
  }

  .v-app-bar {
    top: env(safe-area-inset-top) !important;
    left: env(safe-area-inset-left) !important;
  }

  main.v-content {
    margin-top: env(safe-area-inset-top) !important;
    margin-left: env(safe-area-inset-left) !important;
    margin-right: env(safe-area-inset-right) !important;
    margin-bottom: env(safe-area-inset-bottom) !important;
  }
}

[LineWolff]

In Vuetify 2.2.1 (pure web-app, not cordova) fixed it/hacked it using:

.v-bottom-navigation {
  height: auto !important;
}

.v-bottom-navigation >>> .v-btn__content {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: constant( safe-area-inset-bottom ); /* move footer up on iPhone X - iOS 11.0 */
  margin-bottom: env( safe-area-inset-bottom ); /* move footer up on iPhone X - iOS 11.2 */
}

[jameshhood]

With mobile devices becoming more and more popular how is this not automatically handled in vuetify yet? The same issue happens with the footer too.