refactor(core): use Capacitor safe-area CSS variables on older WebViews

[thetaPC]

Issue number: internal

---

What is the current behavior?

The safe area variables are only reliant on env variables that are provided by devices.

What is the new behavior?

Capacitor 8 has released safe area variable fallbacks to provide consistent behaviors with older Android devices:

Due to a bug in some older versions of Android WebView (< 140), correct safe area values are not available via the safe-area-inset-x CSS env variables. This plugin will inject the correct inset values into a new CSS variable(s) named --safe-area-inset-x that you can use as a fallback in your frontend styles.

• Updated safe area variables to use the fallbacks provided by Capacitor.

Does this introduce a breaking change?

• Yes
• No

Other information

Changes to the core file will be done on main.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Dec 18, 2025 5:10pm

[brandyscarney]

I'm marking this as a refactor so it doesn't show up in the Changelog twice since the fix was made on main already.

[brandyscarney]

It looks like this test uses the legacy Picker and the ionic theme does not have styles for it so this is expected: https://ionic-framework-git-fw-6987-next-ionic1.vercel.app/src/components/app/test/safe-area?ionic:theme=ionic