Css error in ion-header

every time I do an ionic build on my project,
the header looks like this,
any tips on how to resolve?

This is notch area issue.

  1. Have you imported the core.css in your global.scss file ?

  2. Do you use ion-toolbar inside the ion-header ?

  3. Your glabal.scss should be looked like this by default

 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

  1. If your want to support notch area by ionic the you use your header like this. Notch or safe area is responsive in ion-toolbar.
<ion-header [translucent]="true">
    <ion-buttons slot="start">
    <ion-title>{{ folder }}</ion-title>

I have the same issue when I initialised the angular project in ionic the I faced the issue. I am using capacitor where have some configuration which is also very helpful. in your capacitor.config.ts. contentInset: ‘always’. But there would be height issue which will be managed by self. somewhere your list last item will hide behind the screen where for ios, padding bottom needed.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.ionicApp.amin',
  appName: 'Amin,
  webDir: 'www',
  bundledWebRuntime: false,
  ios: {
    contentInset: "always"

export default config;