Issues with iPhone notch

tkclark · March 23, 2020, 4:01am

Having issue with the not and my modal. Anybody know what I should be doing to fix?

I tried adding:

body{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}

but it isn’t helping. Oh, I also feel like the tab bar at the bottom needs some spacing as well. Any advice would be great!

P.S. I am using Ionic/Vue project. Might be outdated?

aaronksaunders · March 23, 2020, 4:55am

github.com

aaronksaunders/capacitor-vue-ionicv4-app/blob/f0f1f928d925c4a88b4ed7eb12f1bf18137d7fcf/src/App.vue

<template>
  <ion-app>
    <ion-vue-router />
  </ion-app>
</template>

<style src='@ionic/core/css/core.css'></style>
<style src='@ionic/core/css/ionic.bundle.css'></style>
<script>
export default {
  name: "App"
};
</script>

<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);

This file has been truncated. show original

tkclark · March 23, 2020, 4:57am

I got it working. The problem (well, besides not being able to determine notch issues in Chrome) was when I ran npx cap update ios it wasn’t really updating. I have found the best thing was to remote the “ios” directory and have it recompile everything from scratch.

Nsimoncini · March 23, 2020, 10:03am

Personally I find

ionic build (--prod if needed)
npx cap copy
npx cap sync

working pretty well, instead of removing iOS platform. Give it a try!
( npx cap update should be copy+sync but I’m not sure your are re-building the project without ionic build)

tkclark · March 23, 2020, 4:17pm

I’ll give it a go!

Currently I do this:
rm -R ios && npm run build && npx cap add ios && npx cap open ios

Never tried ionic build. I wonder how that’s different than `npm run build’?

aaronksaunders · March 23, 2020, 7:18pm

you cannot use ionic build with your vuejs project…

tkclark · March 23, 2020, 7:40pm

Ok, good to know. Figured since Ionic isn’t officially supporting Vue yet.

alitalaee · March 6, 2021, 3:54am

if you use tab template below code can help you to fix it.

ion-app{
margin-top: env(safe-area-inset-top);
margin-bottom: env(safe-area-inset-bottom)
}

alitalaee · October 17, 2023, 1:27pm

in new ionic 6 and up there is some changes…

For me it worked below code

index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

global.scss

// ios bottom iphone x fixed
body {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: calc(7px + env(safe-area-inset-top));
}

variables.scss

:root{
--ion-safe-area-bottom: 14px;
}

.ios{
    --ion-safe-area-top : -1 !important;
  --ion-safe-area-bottom: 14px;
}

I Hope it may help

liza-nt · May 17, 2024, 11:25am

I used this and it worked but there is a button in my header where a popover is opening…before using safe area the popover position was alright after using safe area popover coming way below from header in ios

Topic		Replies	Views
iPhones Notch Ionic Vue	5	2009	October 15, 2020
Any perfect solution for notch detection Ionic Framework	16	3277	November 9, 2020
Ionic 5 and Capacitor: notch overlap problem Ionic Angular	3	11678	April 4, 2020
iOS notch safe area inconsistent behavior Ionic Framework	3	10121	January 19, 2021
IONIC 4 - iPhone X CSS issues Ionic Framework	0	2908	April 17, 2019

Issues with iPhone notch

Related topics