ionic-team / ionic-team/ionic-framework

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

オープン
#30,900 コメント 38 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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

Image
Image

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。