-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Description
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
Hi!
I don't think it's related to this... because my head is already spinning with this topic: #30900
In Android applications with APIs prior to 34 or 35 that use windowOptOutEdgeToEdgeEnforcement, and have disabled edge-to-edge padding, CSS is being inserted at the top of the screen that shouldn't be there in those versions, because it doesn't need that extra space at the top since the Android API already provides it. With capacitor, you can activate it using StatusBar.setOverlaysWebView({ overlay: false});
ion-header ion-toolbar:first-of-type { padding-top: var(--ion-safe-area-top, 0); }
video.top.mp4
It also happens with the bottom of the screen in ion-tab-bar:
video.bottom.mp4
The strangest thing is that according to Chrome, it's 0px... And on my physical device with API 29, it only happens with the top element, not the bottom.
video.0px.mp4
Expected Behavior
If the API fills the border, Ionic doesn't have to, and vice versa.
Steps to Reproduce
Simply create a new project with Capacitor and add StatusBar.setOverlaysWebView({ overlay: false});
Try it, for example, in an emulator with API 34.
npm i
ionic capacitor build android
Code Reproduction URL
https://github.com/Marius-Romanus/demo-safe-area
Ionic Info
Ionic:
Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.8.1
@angular-devkit/build-angular : 21.2.2
@angular-devkit/schematics : 21.2.2
@angular/cli : 21.2.2
@ionic/angular-toolkit : 12.3.0
Capacitor:
Capacitor CLI : 8.2.0
@capacitor/android : 8.2.0
@capacitor/core : 8.2.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.3
System:
NodeJS : v24.14.0 (C:\Program Files\nodejs\node.exe)
npm : 11.11.1
OS : Windows 10
Additional Information
No response