bug: In Android API 36, the safe-area is not respected.

[Marius-Romanus]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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

[ShaneK]

Hello! Thanks for your report. I actually have a PR up that addresses this here:
#30889

Along with a dev build, if you'd like to try it. Please report any issues you find with the dev build or that solution there. Most of our team is OOO until the 5th, so it probably won't be in a patch release until the 7th at the earliest.

[ShaneK]

This is kind of a weird situation. Normally I'd close this as a duplicate, but the duplicate it's of is internal, and this was opened after the PR to fix it. So I guess I'll just update the PR to say it resolves this and it'll be closed when merged

[Marius-Romanus]

I tried version 8.7.16-dev.11767019759.14b7f2fa and the same thing happens.

Most of our team is OOO until the 5th, so it probably won't be in a patch release until the 7th at the earliest.

Happy holidays!

[ShaneK]

I tried version 8.7.16-dev.11767019759.14b7f2fa and the same thing happens.

Yeah, I was getting back to looking at this this morning and realized I was wrong, sorry. My PR was intended to address an issue with iOS. I'm gonna look into this as part of that solution though, since it's all pretty related.

[ShaneK]

@Marius-Romanus could you try my new dev buld, 8.7.16-dev.11767205737.13557925 and see if that works for you?

[Marius-Romanus]

Hi, it seems to work fine with the example, but it doesn't work in my actual project and I haven't figured out why yet.

Edit:
I think it has to do with the fact that in many cases I have it programmatically with controllers in different componentsand presentingElement when loading them:

presentingElement: await this.modalController.getTop()
or
presentingElement: this.ionRouterOutlet.parentOutlet?.nativeEl

modalController = inject(ModalController);
popoverController = inject(PopoverController);

this.modalController.create({ ...
this.popoverController.create({ ...

[ShaneK]

Could you try with this dev build?

8.7.16-dev.11767365495.141917e9

[Marius-Romanus]

Hi, it seems that in this version 8.7.16-dev.11767365495.141917e9 it doesn't display correctly at the top.

And in my actual app, the bottom part still looks bad, and it jumps strangely between looking good and bad.