[Bug Report] iPhone 12 (X & mini) - Vuetify & Cordova safe area display issues!

[escully27]

Environment

Vuetify Version: 2.4.3 Vue Version: 3.0.5 Browsers: Safari OS: iOS

Steps to reproduce

I am unable to reproduce with any of the code demo options because it is only an issue when building thru Cordova and Xcode onto a iOS simulator or real device. Everything appears to work fine in a web browser or codepen. I am totally lost!

Expected Behavior

Vuetify body and app boundaries respect the iPhone 12.x safe areas at all times.

Actual Behavior

Vuetify is inconsistent with the safe areas. It seems to have the correct safe area when scrolling all the way to the bottom of certain components. On the iPhone 12 Mini, the top safe area is slightly incorrect while the iPhone 12 reg top safe area is correct.

Full screen dialogs also disregard the safe area regardless if I have custom css set for it.

Reproduction Link

https://codepen.io/

Other comments

The code I have tried and played with in my App.vue file. Nothing has even made a difference on the iPhone 12 behavior with save area. I got this code from stackoverflow and a related issue on this repo.

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

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

.v-dialog {
  bottom: env(safe-area-inset-bottom) !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset- 
           bottom) env(safe-area-inset-left) !important;
  height: auto !important;
}


#app {

  bottom: env(safe-area-inset-bottom) !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset- 
           bottom) env(safe-area-inset-left) !important;

}

body
   {
      background-color: #f3f3f3;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset- 
               bottom) env(safe-area-inset-left) !important;
   }
</style>

Scrolling to the bottom of a component results in the bottom nav and overall app respecting the iPhone safe area correctly. However, I 'm looking for the bottom nav and app's bottom to be like this 100% of the time, and then I can change the background color below in the safe area to be dark and match. However it is only like this when I scroll to the absolute bottom. Otherwise the bottom nav and app contents are totally down to the bottom of the app.

Here, the iPhone 12 Mini top safe area leaves the component maybe 15-20px below the true app's top. On the iPhone 12 Regular this white space below the status bar is gone, and the top is correct. I know this may be an issue with iphone safe area constants and not vuetify but because of the inconsistencies elsewhere I feel it's best to include.

Finally, on any iPhone 12 the dialog full screen stretches all the way to the bottom and ignores the safe area inset. I cannot have the submit button incorrectly displayed below the iphone x bottom toggle bar. I have had no success getting this to change.

[escully27]

TLDR; what the heck is happening here??

Styled the body's background to red, the app background to green.

https://user-images.githubusercontent.com/11113163/106223846-6ceb8200-619f-11eb-9002-b14721ffd262.mov

[CodingCarlos]

I'm currently facing the same issue. I'll keep you posted if I discover something

[martinsotirov]

Same issue on our app.

[mosaabramadan]

what worked for me is changing

html.overflow-y-hidden {
  overflow-y: hidden !important;
}

to

html.overflow-y-hidden {
  overflow-y: auto !important;
}

in the vuetify.css

with this all the dialogs and bottom sheets respect the safe area

[escully27]

I ended up just binding different margin-bottom for any necessary spots throughout the app if the device is an iPhone X of any kind.

[escully27]

[escully27]

[codanux]

+1

[beyondlevi]

Any news about this? Any workaround at vuetify 2.6?

[danbaechtold]

Really looking forward to this, too.

For now, this does the trick for me (Vuetify 3):

:root {
  --inset-top: env(safe-area-inset-top);
  --inset-bottom: env(safe-area-inset-bottom);
}

body,
.v-navigation-drawer,
.v-overlay__content > .v-card {
  padding-top: var(--inset-top) !important;
  padding-bottom: var(--inset-bottom) !important;
}

.v-app-bar:not(.v-app-bar--bottom) {
  padding-top: var(--inset-top) !important;
}

.v-app-bar--bottom {
  padding-bottom: var(--inset-bottom) !important;
}

Explanations:

• Using vars is optional of course, but allows for local developing and testing (just replace insets in :root to test)
• .v-overlay__content > .v-card is for fullscreen dialogs, which in my code all have a v-card
• I have a bottom app-bar, probably many don't have this, but the same would apply for v-bottom-navigation