[Bug]: safe area variables are calculated incorrectly with SplashScreen native plugin on Android 12 (WebView 140+)

[luisbytes]

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

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

Installed Dependencies:

@capacitor/ios: not installed
@capacitor/core: 8.4.1
@capacitor/android: 8.4.1
@capacitor/cli: 8.4.1

[success] Android looking great! 👌

Other API Details

Platforms Affected

• iOS
• Android
• Web

Current Behavior

When configuring the @capacitor/splash-screen plugin with launchAutoHide: false and hiding it programmatically after a delay, the CSS Safe Area variables (--safe-area-inset-*) are improperly set on Android 12 (with WebView 140+).

Specifically, after SplashScreen.hide() resolves, the app UI renders with unexpected top and bottom spacing/padding. The WebView itself is not running in edge-to-edge mode (it sits below the system status bar), yet the CSS variables still receive positive values (e.g., --safe-area-inset-top: 30px; --safe-area-inset-bottom: 48px;) instead of falling back to 0px.

Note: This behavior only occurs during a clean Cold Start from the App Launcher. When running the app directly via the CLI (pnpm cap run android), the window lifecycle shifts slightly and the issue does not trigger.

Expected Behavior

When SplashScreen.hide() is called, the CSS Safe Area variables should correctly reflect the final state of the WebView layout container. If the WebView is not running in edge-to-edge/fullscreen mode under the system bars, the CSS variables (--safe-area-inset-top and --safe-area-inset-bottom) should evaluate to 0px to avoid layout gaps.

Project Reproduction

https://github.com/luisbytes/safe-area-12

Additional Information

@theproducer Additional screenshots showcasing the visual bug across different WebView versions can be found in the README.md file of the minimal reproduction repository attached below.

[tafelnl]

Could you check if #8535 fixes your issue?

[luisbytes]

@tafelnl The error is still occurring, however I think the PR was fine at the time I was reviewing the plugin code and whether it needed refactoring.

[tafelnl]

The error is still occurring

That's unfortunate. Would you be able to strip down your reproduction ever further so that it only contains a simple index.html file instead of a full blown web app?

however I think the PR was fine at the time I was reviewing the plugin code and whether it needed refactoring.

Sorry, I don't quite follow this sentence, what do you mean by this?

[tafelnl]

Ahh, I think I tracked down what's causing your issue. You should be calling EdgeToEdge.enable(this) in your MainActivity.java like this:

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    EdgeToEdge.enable(this);
  }

This is explained in the docs of the community safe-area plugin, but I guess it's missing in the Capacitor core docs: https://github.com/capacitor-community/safe-area#usage

If you don't want edge-to-edge functionality you should just omit the viewport-fit=cover meta tag and you should be good to go.

However, I don't quite understand your use case; why would you not support edge-to-edge in your app, but do care about safe area insets at the same time. The two seem to contradict each other. Could you elaborate on that?

[luisbytes]

@tafelnl If I'm interested in supporting edge-to-edge

The documentation didn't mention anything about adding EdgeToEdge.enable(this);

Applying EdgeToEdge.enable(this); and patching the plugin with your PR changes seems to work, I'll do more testing.

[luisbytes]

@tafelnl Adding EdgeToEdge.enable(this) without your changes from PR #8535 causes unexpected behavior in earlier versions of WebView 140.

I think that's why I ultimately didn't add it.