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.

Screen Shot 2019-04-01 at 2 47 27 PM Screen Shot 2019-04-01 at 2 46 48 PM

But this is handled fine on iOS:

Screen Shot 2019-04-01 at 2 49 27 PM

Other information:

This issue was brought up in the cordova-plugin-statusbar repository apache/cordova-plugin-statusbar#112 but is still open at the time of writing.
Currently, I have a solution here -> apache/cordova-plugin-statusbar#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

Author: Fantashit

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

  1. 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()

Comments are closed.