Issues with iPhone notch

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?

1 Like

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.

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)

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’?

you cannot use ionic build with your vuejs project…

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

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

1 Like