ionic-team / ionic-team/capacitor

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

Open
#8,522 6 comments 2 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
16.7k
Forks
1.3k
Avg merge
3d 15h
Merged PRs (30d)
10

Description

### 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

```Shell

```

### Platforms Affected

- [ ] iOS
- [x] 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](https://github.com/luisbytes/safe-area-12#screen-capture) of the minimal reproduction repository attached below.

Contributor guide

Open the contributing guide

Research direction

Start with the safe-area-12 reproduction and its README.md screen captures, then trace the Android SplashScreen plugin entry point used by SplashScreen.hide(). Reproduce a cold launch on Android 12 with WebView 140+ and compare the safe-area variables before and after hiding the splash screen. Done means non-edge-to-edge layouts receive 0px top and bottom insets without changing the expected edge-to-edge behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, css
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.