Device elements overlap ionic header

[boengli]

Since updating to cordova-android 11.0.0 I have the problem, that device elements overlap ion-header.

Before the update, it extended the header and made space.

Config.xml:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="Fullscreen" value="true" />

So far, I found out, that it works, after window.location.replace('/home'); but that's not really a solution. Looks like '--ion-safe-area-top' is only set after a reload. StatusBarOverlaysWebView: true/false makes no difference.

[Winamp9]

Did you find a solution?

[jcesarmobile]

<preference name="Fullscreen" value="true" /> makes the app full screen, so that's conflicting with StatusBarOverlaysWebView false, which is the opposite of making the app full screen.

[boengli]

StatusBarOverlaysWebView: true or false, makes no difference. It's always the same/mentioned result. The safe-area isn't written correctly after app start, see #1465

[jcesarmobile]

What I mean is, if you remove <preference name="Fullscreen" value="true" /> but keep <preference name="StatusBarOverlaysWebView" value="false" />, then you'll get a solid status bar and you shouldn't have to worry about the safe-area. The safe-area is handled by the WebView, not by cordova-android nor cordova-plugin-statusbar, so the fact that it works if you reload looks like a timing issue on the WebView (meaning, it looks like an Android bug)

[nijakobius]

I have found a solution and posted it here: https://github.com/apache/cordova-android/issues/1465

[NiklasMerz]

The safe-area is not implemented/released in Androids WebView. See this Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1094366

This mean unfortunately you need to use workarounds like @nijakobius ' mentioned for now until Android gets updated.