Safe Area not defined at the init on Android

Ionic Framework Ionic Angular
1

Hello,

I encounter an issue with the env variable safe-area-inset-top. Actually, the value of this variable in defined to 0px when I open the application and so, the content on the top of the app overlaps the camera notch and the statusbar.

A strange thing appears when I open and close a browser alert (window.alert('something')). After the close of this alert, the variable safe-area-inset-top is defined and so, the space is correctly present on the top. I suppose that this is because the viewport is recalculated but I don’t arrive to force the same behavior without using an alert.

It works fine on IOS and I suppose maybe on other devices with Android. The device with which I am having this problem is a Galaxy A51 with Android 13 (One UI 5.1).

My version of Ionic is 7.0.4 and my version of Capacitor is 5.0.3.

Your can see the render of the issue below:

demo-bug-safe-area-android

Do you have an idea to solve this issue?

Thanks for your help,
Loïc

2

I have the exact same issue with a Xiaomi Redmi Note 11

3

Did you find a solution ? please

4

Hello @baddoyz,

Sorry for my late reply.
No, I didn’t find a real/good solution for this bug but, I defined a CSS rule to ensure the space for Android.
Something like this:

--sat: env(safe-area-inset-top);

.header {
	padding-top: max(30px, var(--sat)); // Define a minimum safe space by default
		
	html.plt-ios & {
		padding-top: var(--sat); // Use the detected safe-space for IOS because I always get a good value
	}
}

Kind regards,
Loïc