[Bug]: Safe Area no longer works on Android

[rtarling]

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/core: 7.0.1
@capacitor/cli: 7.0.1
@capacitor/android: 7.0.1
@capacitor/ios: 7.0.1

[success] Android looking great! 👌
[error] Xcode is not installed

Other API Details

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Since upgrading, safe area on android is not being preserved, with the contents of my header appearing where the notch is.

Expected Behavior

Content should start appearing below the notch.

Project Reproduction

Additional Information

No response

[maxnowack]

I've got the same issue.
I've tried to get a workaround with capacitor-plugin-safe-area, but it doesn't get any valid values and logs
WindowInsets is not available

[rtarling]

Luckily that plugin seems to have worked for me - I put the code in App.vue, but to be honest I'd rather not use it. If it was working fine before, something must have got broken in the latest release, and I'd prefer it to be fixed there.

In case you don't have the same, this needs to be in the index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

[nikqig]

Refer to these threads: 7804 & 30090

[AntoscencoVladimir]

Same issue

[jcesarmobile]

Android 15 enforces edge to edge, the css safe-area-inset-top works fine, but not the safe-area-inset-bottom, that's a WebView bug and a there is a PR that should fix it, but it's not merged.

In Capacitor 7.1.0 we are adding a android.adjustMarginsForEdgeToEdge configuration option that would allow to make the WebView avoid the safe areas.

#7885

Android also provides a windowOptOutEdgeToEdgeEnforcement attribute that you can add in styles.xml to your theme and set it to true like this <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:ignore="NewApi">true</item> to opt out of edge to edge, but having in mind that it will be removed in Android 16, so only works for Android 15.

[neave]

@jcesarmobile Thanks for this. Just to clarify, when android.adjustMarginsForEdgeToEdge is false it disables edge-to-edge, but when android.adjustMarginsForEdgeToEdge is true it will use the current behavior where safe-area-inset-bottom is not correct (0px)? If that’s the case, it seems that we can’t practically use edge-to-edge with Capacitor until the WebView bug fix is available. Is that correct?