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…

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`);…

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

Capacitor

twestrick July 9, 2024, 1:50pm 2

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

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

Topic		Replies	Views
SOLVED -–ion-safe-area has no effect on iOS Ionic Framework	8	6684	March 12, 2025
Safe Area not defined at the init on Android Ionic Angular	3	2612	July 17, 2023
Env(safe-area-inset-*) not working with correct meta tag Ionic Vue	2	398	December 30, 2024
Safe-area css ios cordova	20	25308	September 13, 2021
Safe-area css ios issue Ionic Framework	8	14945	January 26, 2023

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

Related topics