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`
      );
    });
1 Like