ionic-team / ionic-team/ionic-framework
bug: In Android API 36, the safe-area is not respected.
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
### 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
### 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_
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.