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

v6.x

Current Behavior

ion-content has the following CSS variables:

--offset-top: 56px;
--offset-bottom: 64px;

The values are set dynamically by Ionic, depending on the height of the content of ion-header and ion-footer. So far, so good. However, this only works correctly sometimes, and other times it does not. For example, we have a page like this:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/dashboard/home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>My Cool Content</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar style="min-height: initial; padding: 24px 24px 0 24px;">
    <p>Bla Bla Bla</p>
  </ion-toolbar>
  <ion-toolbar style="padding: 24px;">
    <button style="height: 86px;">Save</button>
  </ion-toolbar>
</ion-footer>

Since we assign a background image to our ion-content, the error in the incorrect offset calculation is very noticeable. When the appload event is fired again (window.dispatchEvent(new Event('appload'));) afterward, ion-content will correct the offsets, and they will be accurate. See in this video:

Expected Behavior

By subsequently firing window.dispatchEvent(new Event('appload')); with a timeout, there is a brief flickering, as the user briefly sees the black area. I would wish that in any case, ion-content always determines the correct offset values by itself and automatically.

Steps to Reproduce

I'm a bit confused right now... I have exactly the same structure of my app in StackBlitz, and the error does not occur there. Could this possibly have something to do with timings? Does this only happen in my app because there is significantly more data to load?

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-jq74l5?file=src/app/features/feature-wallet/feature-wallet-overview/feature-wallet-overview.component.html

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : 1.7.2

System:

NodeJS : v16.17.1
npm : 8.19.2
OS : Linux 5.15

Additional Information

Here's what I've tried to solve the problem:

I have created a lifecycle.service.ts:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LifecycleService {
  viewDidEnter$ = new Subject<void>();
  viewDidLeave$ = new Subject<void>();
}

app.component.ts

constructor(private lifecycleService: LifecycleService) {}

ngOnInit() {
  this.lifecycleService.viewDidEnter$.subscribe(() => {
    window.dispatchEvent(new Event('appload'));
  });
}

In ALL Views

constructor(private lifecycleService: LifecycleService) {}

ionViewDidEnter() {
  this.lifecycleService.viewDidEnter$.next();
}

As a result, the problem with the black bar occurs MUCH less frequently. However, it still happens occasionally.