iPhones Notch

Notch on iphones is partially obstructing the app. Whats the best way of handling this?

I tried this but no luck

Screenshot 2020-10-14 at 12.43.36

I’m not a Vue user, but if this happens i a starter app, maybe the safe area’s don’t work. Then you should open an Issue here

You cat try adding this to style section in app.vue

<style>
ion-navbar.toolbar.toolbar-ios.statusbar-padding,
ion-navbar.toolbar-ios ion-title.title-ios,
ion-toolbar.toolbar.toolbar-ios.statusbar-padding,
ion-toolbar.toolbar-ios ion-title.title-ios {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}
</style>

@EinfachHans @aaronksaunders thanks. Adding ion-safe-area-top class to header worked

<ion-header class="ion-safe-area-top">

1 Like

I think this should be come out of the box (it does in angular)

You don’t show any source code for the page so I cannot answer that question. But I am guessing that you are not using ion-header?