[Bug]: capacitor 7 android navigation bar overlap

[danielehrhardt]

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 7.0.1
@capacitor/core: 7.0.1
@capacitor/android: 7.0.1
@capacitor/ios: 7.0.1

Installed Dependencies:

@capacitor/cli: 7.0.0-rc.0
@capacitor/core: 7.0.0-rc.0
@capacitor/android: 7.0.0-rc.0
@capacitor/ios: 7.0.0-rc.0

[success] iOS looking great! 👌
[success] Android looking great! 👌

Other API Details

Platforms Affected

• iOS
• Android
• Web

Current Behavior

since capacitor 7 the app on android overlaps the navigation bar
and

StatusBar.setOverlaysWebView({
        overlay: false,
      });

does not work anymore

Expected Behavior

tha navigation and statusbar should not overlap

Project Reproduction

new capacitor project

Additional Information

No response

[mleister97]

I switched to https://github.com/capacitor-community/safe-area

[danielehrhardt]

I switched to https://github.com/capacitor-community/safe-area

me too

[markemer]

Can you update your Capacitor and plugins especially to 7.0.1 and see if it goes away.

[markemer]

Even just the release version of 7.0.0 and let me know how that goes.

[ionitron-bot]

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

[markemer]

Can I get an example of exactly what you're seeing?

[kensodemann]

I am not sure why this was closed as I see no message indicating a valid resolution, just a switch to using a different plugin for something we probably ought to be handling OOTB.

As such, I have created a proper sample reproduction: https://github.com/kensodemann/status-bar

See the README.md in the sample for a simple rundown of what I am seeing across a few different versions of Android and how that compares to Capacitor v6 behaviors.

[neave]

Is this related to issue #7648?

This issue is caused by Android WebView being broken and not returning proper values for safe area.

Android 15 (SDK 35) introduced edge-to-edge layout. Using SDK 34 forces the old behvior without the edge-to-edge layout, but this is not a long-term solution. Another option may be to opt-out of edge-to-edge but this also doesn't embrace the changes.

[mohaalshehri]

I'm facing the same issue, is there a fix planned for this? this is a stopper for migration for me

[neave]

This does seem to be the same problem as described in issues #6423, #7648, and #7804. Android WebView provides incorrect values for the safe area insets in CSS. The only workaround seems to be to downgrade to SDK 34, or use android:windowOptOutEdgeToEdgeEnforcement="true", or try to use CSS variables via @capacitor-community/safe-area. Even if Google do fix this eventually, it will be a longstanding problem which should be addressed by Capacitor.

[danielehrhardt]

@capacitor-community/safe-area

I tried to implement it with the safe-area plugin but it is not really consistent over the API Levels. It would be great if Capacitor / Ionic will provide some Solution.