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

5

You can add these variables in your theme/variables.css

::root {
  //rest of your styles
  --ion-safe-area-top: 2.5rem;
}

:root.ios {
  --ion-safe-area-bottom: 1rem;
}

ion-header ion-toolbar:first-of-type {
  padding-top: var(--ion-safe-area-top, 0);
}

but it is just a workaround. Need to have a proper solution

6

Hello @AliYar-Khan,

Thanks for your message!

This isn’t entirely correct because it will overwrite the default value set based on the device (if any) and the safe-area-top is potentially different on devices.

A better approach is to set a fallback value when no value is set by using the function max (to ensure using the bigger value: max(30px, var(--ion-safe-area-top));

But the best approach still be the real support/definition of the safe-area-inset-top on all devices but It depends on the manufacturer of each device.

Also, to solve the Android issue of wrong value at the init of the webview, we can use the package import { SafeArea } from 'capacitor-plugin-safe-area'; like this:

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

N.B: The fallback value of the “var” function is a good idea but the fallback will be used only if the variable does not exists or in this case, the variable exists but the value is sometime wrong (equal to 0).

Have a nice day,
Loïc