[Bug]: Edge-To-Edge-Mode not working

[MisterNox]

Capacitor Version

8.3.0

Sample Project

https://github.com/MisterNox/safe-area-capacitor-test

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Right now the webview is not covering the entire screen with v8.3.0 and those settings:

  "@capacitor/android": "8.3.0",
  "@capacitor/app": "8.1.0",
  "@capacitor/cli": "8.3.0",
  "@capacitor/core": "8.3.0",
  "@capacitor/haptics": "8.0.2",
  "@capacitor/keyboard": "8.0.2",
  "@capacitor/status-bar": "8.0.2",

  "android": {
    "adjustMarginsForEdgeToEdge": "disable"
  },
  "plugins": {
    "SystemBars": {
      "insetsHandling": "css",
      "style": "DEFAULT",
      "hidden": false,
      "animation": "NONE"
    },
    "Keyboard": {
      "resizeOnFullScreen": false,
      "resize": "none"
    }
  }

Expected Behavior

The webview should cover the entire screen and status bar as well as navigation bar are overlays. I tested it with v.8.1.0 and those settings:

    "@capacitor/android": "8.1.0",
    "@capacitor/app": "8.0.0",
    "@capacitor/cli": "8.1.0",
    "@capacitor/core": "8.1.0",
    "@capacitor/haptics": "8.0.0",
    "@capacitor/keyboard": "8.0.0",
    "@capacitor/status-bar": "8.0.0",

  "android": {
    "adjustMarginsForEdgeToEdge": "disable"
  },
  "plugins": {
    "SystemBars": {
      "insetsHandling": "css",
      "style": "DEFAULT",
      "hidden": false,
      "animation": "NONE"
    },
    "Keyboard": {
      "resizeOnFullScreen": false,
      "resize": "none"
    }
  }

Additional Information

Maybe I missed something, but the last time I built an Android app in capcitor version “8.1.0” the new edge-to-edge mode was automatically enabled for the new Android version. Now, with Capacitor version “8.3.0” it’s no longer enabled by default. Furthermore, I can’t enable this mode either via "adjustMarginsForEdgeToEdge" or through the “SystemBars” config. What am I doing wrong? Has the configuration for enabling edge-to-edge mode changed, or is this a bug? Thanks in advance for your help.

I deleted the entire android folder before each test and I used a Samsung S24 with Android 16 for my tests.

[MisterNox]

Okay, seems like adjustMarginsForEdgeToEdge has been removed in v8.X.X. But the handling through the systembars plugin does not work for me in v8.3.0 with a Samsung S24 and Android API 36. The test have been made with a fresh project.

[MisterNox]

Here another example for the same project. I only changed "@capacitor/android", "@capacitor/cli" and "@capacitor/core" to v.8.1.0, v8.2.0 and v8.3.0:

[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 7 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

[theproducer]

Hey @MisterNox , I can confirm this is a problem, but can you share that test app you are using from the screenshots? I'll be using it and others to test our fixes against.

[MisterNox]

I did some research on this myself. Here are my thoughts; I'm curious to hear what you think.

1. First, I made a few changes to Systembars.java because I had previously noticed, while setting background colors for CoordinatorLayout and CapacitorWebView in capacitor_bridge_layout_main.xml, that the CoordinatorLayout takes up the entire screen area but apparently sets some padding, so the CapacitorWebView doesn’t fill the entire screen. Since the inset calculation happens in Systembars, this was my first place to look.

2. Since I hadn’t found a complete solution, I rolled back the code to its original state (I’m certain that none of the changes I made remained). One would expect that the original problem would now resurface. However, that wasn’t the case. Now it somehow worked, though I did notice another issue regarding the injection of the –safe-areas-inset-... variable (more on that in the next point). Naturally, my first question is: how is this possible? My initial thought was that there must have been some caching during the build process or similar, which carried this error over. I use VSCode with the WebNative plugin for my projects. So here’s my question for the experienced folks among you: Is it possible that, despite working on different projects, some cross-project caching occurs when switching between Capacitor versions, causing these errors? Nothing else comes to mind at first glance. I naturally tried deleting everything (android, dist, node_modules folders), changing the versions, building, and then reverting the version changes. The problem no longer occurs.

3. When I downgraded the version, I noticed that in v8.1.0, for example, you could still set the CSS variable using env(safe-area-inset-top), but this doesn't work in v8.3.0. I also noticed that --safe-area-inset-... is not set when the application starts (in v8.3.0). For example, I use vue.js, and in mounted() of App.vue, the variable is not yet set. When I check again using setTimeout and 100ms, I now get the inset value. So it seems that –safe-area-inset-... is injected with a delay in the latest version. My guess is that this is also why, for example, env(…) doesn’t work, because the value isn’t available right away. Or has the env option been removed? Maybe someone could check this and confirm?

@theproducer Of course, i can provide my simple example, but since the original problem no longer exists, i'm not sure how useful that would be. i'll do it anyway later today. Even though I don't have that problem anymore, the issue should still be looked into further. If it has something to do with caching and can be resolved somehow, that would certainly mean a lot fewer open issues.

[MisterNox]

Okay, forget what I just said about the problem is gone. When I start a fresh project it happens again. I have added an example project to my initial post.