Prerequisites
Ionic Framework Version
v8.x
Current Behavior
This is due to switching to Capacitor 8, which uses Android API 36, where windowOptOutEdgeToEdgeEnforcement no longer works:
https://capacitorjs.com/docs/apis/status-bar#android-16-behavior-change
Modals and popovers (that I've seen) are not respecting the safe area.
I've implemented the SystemBars plugin with insetsHandling in CSS, but it makes no difference:
https://capacitorjs.com/docs/apis/system-bars#android-note
It seems the only place where it's respected is the top element, if you have an ion-header in CSS:
ion-header ion-toolbar:first-of-type {
padding-top: var(--ion-safe-area-top, 0);
}
I've tested it on the following emulators:
Pixel 9 Pro - API 36
Pixel 7 Pro - API 35
Pixel 6a - API 33
Expected Behavior
The safe area should always be respected in all cases and at all edges.
Steps to Reproduce
npm i
ionic capacitor build android
Enable "Navigation mode: Buttons" if it's set to "Gestures"
See the modal and popover in tab 1.
The global CSS contains:
html {
--ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
--ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
--ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
--ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
Code Reproduction URL
https://github.com/Marius-Romanus/safe-area-ionic
Ionic Info
Ionic:
Ionic CLI: 7.2.1
Ionic Framework: @ionic/angular 8.7.15
@angular-devkit/build-angular: not installed
@angular-devkit/schematics: 20.3.13
@angular/cli: 21.0.4
@ionic/angular-toolkit: 12.3.0
Capacitor:
Capacitor CLI: 8.0.0
@capacitor/android: 8.0.0
@capacitor/core: 8.0.0
@capacitor/ios: not installed
Utility:
cordova-res: not installed globally
native-run: 2.0.1
System:
NodeJS: v24.11.0
npm: 11.7.0
OS: Windows 10
Additional Information
No response
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
This is due to switching to Capacitor 8, which uses Android API 36, where
windowOptOutEdgeToEdgeEnforcementno longer works:https://capacitorjs.com/docs/apis/status-bar#android-16-behavior-change
Modals and popovers (that I've seen) are not respecting the safe area.
I've implemented the SystemBars plugin with
insetsHandlingin CSS, but it makes no difference:https://capacitorjs.com/docs/apis/system-bars#android-note
It seems the only place where it's respected is the
topelement, if you have anion-headerin CSS:I've tested it on the following emulators:
Pixel 9 Pro - API 36
Pixel 7 Pro - API 35
Pixel 6a - API 33
Expected Behavior
The safe area should always be respected in all cases and at all edges.
Steps to Reproduce
Enable "Navigation mode: Buttons" if it's set to "Gestures"
See the modal and popover in tab 1.
The global CSS contains:
Code Reproduction URL
https://github.com/Marius-Romanus/safe-area-ionic
Ionic Info
Additional Information
No response