safe-area-inset is not respected for Android and only works on iOS

Bug Report

Ionic version:

[x] 4.x

Current behavior:

The safe-area-inset-top is not respected on android devices so even with a notch at the top, there is no padding added. Expected behavior:

The safe-area should be respected similar to what’s happening on iOS

Steps to reproduce:

Open the ionic conference app with a notched android phone, or on an android emulator running Android P or above so that a notch can be added programmatically to test. Then add this.statusBar.overlaysWebView(true); in the initializeApp() function located in app.components.ts before running the app.

But this is handled fine on iOS:

Other information:

This issue was brought up in the cordova-plugin-statusbar repository https://github.com/apache/cordova-plugin-statusbar/issues/112 but is still open at the time of writing. Currently, I have a solution here -> https://github.com/apache/cordova-plugin-statusbar/pull/134 (see feature/addGetStatusBarHeightMethod) which will introduce to a way to obtain the height of the status bar through a service call. However, it would be ideal if the safe-area-inset can be enhanced to also work for Android devices

[eyeswideopen]

I’m having the same issue and temporarily resolved it with:

• installing cordova-plugin-android-notch (github repo)
• setting the missing ‘–ion-safe-area-top’ css var for android via

declare var window: any;

if (window.AndroidNotch) {
        const style = document.documentElement.style;

        window.AndroidNotch.getInsetTop(px => {
          style.setProperty('--ion-safe-area-top', px + 'px');
        }, (err) => console.error('Failed to get insets top:', err));
}

in the initializeApp() in app.component.ts inside a platform.ready()

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework.

Ionic Framework is functioning as intended with regards to utilizing the safe-area-inset variables. However, the Chromium webview found on Android is not properly setting the safe-area-inset values. As a result, all of the values are initialized to 0px. This results in the behavior you are experiencing.

There is nothing we can fix right now, as the bug is in the webview not Ionic Framework. I have reported this bug to the Chromium team: https://bugs.chromium.org/p/chromium/issues/detail?id=1094366.

As a temporary workaround, I recommend one of the following routes:

1. Do not use overlaysWebView(true) for now. (Not ideal, I realize.)

2. Try using the plugin suggested in https://github.com/ionic-team/ionic/issues/17927#issuecomment-492198561. It sounds like this is not a perfect solution, but for simple use cases this may get the job done. You could use this to set the --ion-safe-area-top CSS Variable. Please note that this should be done at runtime.

Thank you!