bug: native status bar padding breaking ion-header

[Tialko]

Bug Report

Capacitor Version

npx cap doctor output:

@capacitor/electron not installed
@capacitor/cli 2.1.0
@capacitor/core 2.1.0
@capacitor/android 2.1.0
@capacitor/ios 2.1.0

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

In the app I am currently developing the status bar is overlapping the app container/viewport.

I manage to resolve this by adding:

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left),

but this created me another problem in IOS. My ion-header now have and extra padding-top.
It seems like ion-toggle inside ion-headers are inherit some root padding-top behavior.

I manage to create a workaround by forcing the padding-top to 0 in ion-toolbar, but it feels like that this is not the expected behavior as in Android there has no problems.

I just want my app to not overlap the status bar.

How can I achieve this behavior with Capacitor and the Status Bar Plugin?

Sample Code or Sample Application Repo

scss file
:root { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

index.html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

somepage.html

<ion-header>
    <ion-toolbar>

        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>{{ PageTitle | translate }}</ion-title>

    </ion-toolbar>
</ion-header>
<ion-content>
...
</ion-content>

Behavior

Workaround

ion-header {
   ...

    ion-toolbar {
        // Fix the padding created by env(safe-area-inset-top)
        padding-top: 0px !important;
    }
   ...

}

Other Technical Details

npm --version output: 6.13.4

node --version output: 12.16.1

pod --version output (iOS issues only): 1.8.4

[jcesarmobile]

ionic is supposed to handle that for you, that's probably why you have problems after adding the padding, it messes with ionic components that already take care of safe areas.

moving the issue to ionic repo so it can be properly triaged, but I think you shouldn't be adding that padding

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Ionic Framework handles the safe area padding for you, but if you want to customize the safe area padding you can modify our safe area CSS variables.

Example:

:root {
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 20px;
    --ion-safe-area-right: 20px;
    --ion-safe-area-left: 20px;
  }

These CSS Variables are initially set in https://github.com/ionic-team/ionic/blob/master/core/src/css/core.scss#L133-L156. You could use some combination of the CSS Variables and the env values to get the behavior you desire.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.