Issues with iPhone notch

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

I tried adding:

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.