ionic-team / ionic-team/capacitor
[Bug]: safe area variables are calculated incorrectly with SplashScreen native plugin on Android 12 (WebView 140+)
- 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
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