Safe Area Values Always Zero on Android with Ionic Capacitor Version 6

Capacitor
1

Hello,

I recently set up a project using Ionic with Capacitor version 6, and I’ve encountered an issue where the safe area values on Android are consistently returning zero. I’m currently on Android 14, using Java 17, and Gradle 8.6. However, everything works perfectly on iOS.

Could anyone provide insights or solutions to this issue?

Thank you!

2

Check this discussion - SOLVED -–ion-safe-area has no effect on iOS

Make sure your <meta name="viewport" is correct.

3

It must be correct since it was created by Ionic, but just in case, I’ll paste it here for you.

    <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"
    />
4

Here is the solution I’d like to share:

npm install capacitor-plugin-safe-area

import { SafeArea } from "capacitor-plugin-safe-area";

....

SafeArea.getSafeAreaInsets().then((data) => {
      const { insets } = data;
      document.body.style.setProperty("--ion-safe-area-top", `${insets.top}px`);
      document.body.style.setProperty(
        "--ion-safe-area-right",
        `${insets.right}px`
      );
      document.body.style.setProperty(
        "--ion-safe-area-bottom",
        `${insets.bottom}px`
      );
      document.body.style.setProperty(
        "--ion-safe-area-left",
        `${insets.left}px`
      );
    });
5 Likes
5

Men i fucking love you!!! THANK YOU SO MUCH!!!

6

In what file do you put this code?

7

You would want to put it in your start-up script before the app renders. For example in Vue, main.ts.

8

Hi thanks for the quick reply. I actually put it in App.vue, and seems to work, except for when I have a modal. Is main.ts a better place?

9

App.vue should be fine. It gets mounted in main.ts. Does your modal have a ion-header and ion-toolbar?

Ionic automatically adds padding to certain components. For example, the first ion-toolbar component placed in an ion-modal will receive padding according to the top edge of the device’s safe area. - (source)