SOLVED -–ion-safe-area has no effect on iOS

Ionic Framework
1

Ionic 8 and Capacitor 6 with VueJS

I’ve seen several posts around this issue, but unfortunately none of the proposed fixes work for me, or seem “the right way to do it”.

As I understand it, safe areas should be applied automatically to each device, ensuring for e. g. ion-header and ion-footer or ion-tabs to be displayed correctly.

However, in my app this isn’t the case at all. Maybe I’m missing something as I don’t find the docs to be very concise on how and when to use the application variables --ion-safe-area (or if I’m actually supposed to use them - unless I want to change them deliberately for my purposes).

simulator_screenshot
simulator_screenshot1290×2796 172 KB

Anywho: I’d really appreciate someone shedding some light on this for me as I’m currently really lost.

Feel free though, to check out the Github repo: GitHub - socialmedialabs/ionic-sample-tabs-app

2

The documentation isn’t clear which components auto get safe area padding.

For me, I’ve set it manually in my :root styles.

Running your project, it would seem --ion-safe-area-top is not set by default, so that is why using that variable in ion-header is not doing anything.

You could do something like this to apply globally:

:root {
  /* YOUR OTHER STYLES */
  --ion-safe-area-top: 2.5rem;
}

:root.ios {
  /* YOUR OTHER STYLES */
  --ion-safe-area-bottom: 1rem;
}

And then remove it from ion-header otherwise you’ll get double padding. By default, this CSS is applied by Ionic:

ion-header ion-toolbar:first-of-type {
    padding-top: var(--ion-safe-area-top, 0);
}

EDIT

By default, it appears to be set by an env SCSS variable - ionic-framework/core/src/css/core.scss at 0873dc2ffbc623439a74926937a75f54a28b9709 · ionic-team/ionic-framework · GitHub

3

Thank you for taking the time to reply @twestrick.

While this indeed applies the necessary padding, it opens up another problem: the padding will be the same in landscape mode. Which in the end would lead to me having to detect landscape mode and then adding/removing css. That feels like a hack…

simulator_screenshot_landscape
simulator_screenshot_landscape2556×1179 86.4 KB

I really feel like we’re missing something here and that there must be a better/proper way to get this working without tweaking it manually.

Should I file an issue on Github?

4

Hold up, I just stumbled across the answer:

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

The viewport-fit directive is the crucial part. Once added, no more messing around with custom css, neither in landscape nor portrait mode.

Hope this helps others as well and finds its way into the docs.

1 Like
5

Nice find! You might still need to override the safe area defaults due to different size notches. That’s what I had to do starting in Ionic 5 (currently on Ionic 7 and haven’t re-visited).

I am also using Vue and have the following:

<meta
    name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

This matches the starter project too here. You might want to add the additional bits if you copied everything from that discussion.

2 Likes
6

Coming from a base of VueJS built with vite, this html of course is missing. Didn’t even think about that. Thanks for pointing me to that file, definitely gonna grab the additional bits!

1 Like