Skip to content

bug: Unnecessary space in Android with edge-to-edge formatting disabled #31018

@Marius-Romanus

Description

@Marius-Romanus

Prerequisites

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});

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions