bug: content does not update offset variables if header and footer dimensions change

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v6.x

### Current Behavior

ion-content has the following CSS variables:

```scss
--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:

```html

My Cool Content

Bla Bla Bla

Save

```

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:

https://user-images.githubusercontent.com/4930169/226323071-38292ef3-e6fb-4197-8c05-400125f6313e.mp4

### 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:
```ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

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

app.component.ts
```ts
constructor(private lifecycleService: LifecycleService) {}

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

In ALL Views
```ts
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.

先从 ion-content 的偏移量计算和关联的 StackBlitz 复现开始，然后比较 header 和 footer 内容在加载后大小发生变化时的行为。完成标准是 --offset-top 和 --offset-bottom 自动更新为正确的尺寸，无需 appload 事件，也不会造成可见的闪烁。

由索引模型根据 Issue 内容生成。