[Bug]: Header is behind the statusbar on Android 13

[otabekoff]

Capacitor Version

I am using Capacitor 7 and Ionic 8. I've Node version 22.

Other API Details

npm --version
11.5.2

node --version
v22.17.1

pod --version
'pod' is not recognized as an internal or external command,
operable program or batch file.

I am on Windows 11.

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Header is leaving behind the transparent statusbar on Android 13 LG Wing 5G phone.

As you can see I've just created a new project and edited "Tab 1 Page" to "Tab 1 only, to see if live reload is working or not.

This is that default tabs template.

How I can fix this? I can't find any working solution, no any videos, tutorials articles.

According to the docs I did these too, but didn't work:

html {
  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
  --ion-safe-area-left: env(safe-area-inset-left);
  --ion-safe-area-right: env(safe-area-inset-right);
}
ion-content {
  padding-top: var(--ion-safe-area-top);
  padding-bottom: var(--ion-safe-area-bottom);
  padding-left: var(--ion-safe-area-left);
  padding-right: var(--ion-safe-area-right);
}

ion-header {
  padding-top: var(--ion-safe-area-top);
  box-sizing: border-box;
}

ion-header, .ion-header {
  padding-top: var(--ion-safe-area-top, env(safe-area-inset-top));
  box-sizing: border-box;
}

ion-toolbar {
  padding-top: var(--ion-safe-area-top);
}

So, is this a bug or undocumented and fix available stuff?

Expected Behavior

It was expected to see Safe Area working gracefully.

Project Reproduction

https://github.com/user-attachments/assets/75549d9b-3a77-4751-bfdc-e197d011100f

Additional Information

No response

[Airdevelopments]

We are experiencing this issue on Android 15 after the "Android System WebView" has been updated to version 139. (Latest Ionic 8 and Capacitor 7)

When comparing the value of env(safe-area-inset-top) on WebView 138 with WebView 139, we can observe 30px on version 138 and 0px on version 139.

At this moment it is not clear to us whether this is new desired behavior (for edge-to-edge use cases) or a regression.

A temporary workaround is making use of the capacitor provided android config adjustMarginsForEdgeToEdge to set the spacing on the native level instead of inside the web app.

[neave]

There seems to be a regression bug in WebView 139 which makes the safe areas 0px again. See https://issues.chromium.org/issues/40699457#comment44

[otabekoff]

A temporary workaround is making use of the capacitor provided android config adjustMarginsForEdgeToEdge to set the spacing on the native level instead of inside the web app.

@Airdevelopments Yes, that might help. But is there a way to get the exact status bar size? Would it require writing some custom Kotlin code, or is there another approach?

[Airdevelopments]

A temporary workaround is making use of the capacitor provided android config adjustMarginsForEdgeToEdge to set the spacing on the native level instead of inside the web app.

@Airdevelopments Yes, that might help. But is there a way to get the exact status bar size? Would it require writing some custom Kotlin code, or is there another approach?

I believe while the bug in Chromium is present, you will have to use native code to get the actual relevant inset values. As stated earlier they do not get passed down correctly into the web context anymore. There might be some Capacitor Plugins out there that already implement methods to get the desired values but I have no experience with any of those.
(A quick search yielded https://www.npmjs.com/package/capacitor-plugin-safe-area but like I said I have no experience with it).

As the Chromium Team did acknowledge this to be a regression, they moved up the priority to P1. Personally I just hope this gets resolved soon to avoid any complicated workarounds that might then in turn get bricked when the Chromium bug is fixed.

[thomasdondorf]

Here is the code I'm using to solve this problem. I'm checking if --ion-safe-area-top is 0px. In that case I'm using @capacitor-community/safe-area to detect the correct values and overwrite the --ion-safe-area-top and --ion-safe-area-bottom variables. That way, when --ion-safe-area-top holds a value, this code does not do anything.

import { isPlatform } from "@ionic/react";

const IONIC_TOP = '--ion-safe-area-top';
const IONIC_BOTTOM = '--ion-safe-area-bottom';

// inside of initialize function
if (isPlatform('android') && isPlatform('capacitor')) {
    const root = window.getComputedStyle(document.querySelector(":root"));
    const ionicSafeTop = root.getPropertyValue(IONIC_TOP);
    if (!ionicSafeTop || ionicSafeTop === '0px') {
        // The following call will set `--safe-area-inset-top` and `--safe-area-inset-bottom` variables
        await nativeSafeArea.enable({
            config: {
                // you can also set values like theme color here for the status bar icons if needed (see docs)
            },
        });
        // Overwrite the original values with the values that will be set by the plugin
        document.documentElement.style.setProperty(IONIC_TOP, `var(--safe-area-inset-top, ${ionicSafeTop})`);
        const ionicSafeBottom = root.getPropertyValue(IONIC_BOTTOM);
        document.documentElement.style.setProperty(IONIC_BOTTOM, `var(--safe-area-inset-bottom, ${ionicSafeBottom})`);
    }
}

[tafelnl]

There seems to be a regression bug in WebView 139 which makes the safe areas 0px again. See https://issues.chromium.org/issues/40699457#comment44

The chromium team says they fixed the regression bugs and insets should now be reported correctly. Haven't tested it yet though: https://issues.chromium.org/issues/40699457#comment58

[neave]

@tafelnl I can confirm this is fixed when using the Canary build of WebView. It looks like 139 will be stuck with this bug unfortunately, but the patch might be applied to 140 soon (see https://issues.chromium.org/issues/40699457#comment60 )