bug: Safe Area Insets broken on Android after recent WebView update

[SteliosMoch]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Safe area insets are ignored, causing UI overlap with the system status bar and navigation bar.

Expected Behavior

ion-header and ion-footer should respect safe area insets on Android, avoiding overlap with system UI.

Steps to Reproduce

1. Create a new Ionic app
2. Add the android folder and make sure compileSdkVersion = 35 and targetSdkVersion = 35
3. Run the app on an Android device with the latest Android System WebView.
4. Observe that the toolbars no longer respect safe area insets.

Code Reproduction URL

https://github.com/SteliosMoch/safe-area-test

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (/Users/stelios/.nvm/versions/node/v22.17.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.7.3
@angular-devkit/build-angular : 19.2.15
@angular-devkit/schematics : 19.2.15
@angular/cli : 19.2.15
@ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.3
@capacitor/android : 7.4.3
@capacitor/core : 7.4.3
@capacitor/ios : 7.4.3

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v22.17.0 (/Users/stelios/.nvm/versions/node/v22.17.0/bin/node)
npm : 10.9.2
OS : macOS Unknown

Additional Information

Since last week, Safe Area handling is broken on Android for both ion-header and ion-footer. The top and bottom insets are no longer respected, causing toolbars and content to overlap with the system status bar and navigation bar.

This issue started appearing after the most recent Android System WebView update. Prior to that, the same codebase worked correctly.

[Pepemakis]

Having the same issue

[liamdebeasi]

This is due to a regression in the Chromium WebView. A fix is currently being targeted for a v141 release. You can follow https://issues.chromium.org/issues/40699457 for updates.

edit: Looks like priority has been bumped up, so it should be fixed in the v140 release instead.

[Bhargavp001]

Having the same issue.

[prakash-patel-2801]

i face same issue

[parollon]

I had this problem too, so I created a plugin that patches it (for now).

Note: It has only been tested on Ionic/Angular and Android. I may have missed something, but if it is helpful...

Safe area patch

[IAM5K]

I am having this same issue in the new project with the default template.

[Bhargavp001]

Hey everyone,
If you're experiencing issues with safe area not working properly on Android 15 (API level 35), here's a working solution that fixed it for me:
Add this line to your styles.xml

<item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
For Example :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item> </style>

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:background">@null</item> <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item> </style>

`  <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
    <item name="android:background">@drawable/splash</item>
  <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
</style>`

This disables the new edge-to-edge enforcement introduced in Android 15, which can cause layout or padding issues — especially in hybrid apps like Ionic.

Make sure your target SDK version is 35, or this won't take effect.

[IAM5K]

Thanks @Bhargavp001 ,
Above solution works for Android.

Add this to your styles.xml

• Dont miss to import tools
• <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>

My final styles.xml for freshly created app.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
    </style>


    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
    </style>
</resources>

If anyone has any solution for iOS, please share.

[mwagena]

For me the best fix was to install the capacitor-plugin-safe-area plugin and load the following function into the constructor of app.component.ts

  // fix for following bug: https://github.com/ionic-team/ionic-framework/issues/30654
  async safeAreaFix(): Promise<void> {
    const safeAreaData = await SafeArea.getSafeAreaInsets();
    const { insets } = safeAreaData;

    for (const [key, value] of Object.entries(insets)) {
      document.documentElement.style.setProperty(
        `--ion-safe-area-${key}`,
        `${value}px`,
      );
    }
  }

[SteliosMoch]

it seems google fixed the issue for now, but maybe ionic team should give a way to handle this natively