Safe Area not defined at the init on Android

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

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