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.

Start with the ion-content offset calculation and the linked StackBlitz reproduction, then compare behavior when header and footer content changes size after loading. Done means --offset-top and --offset-bottom update automatically to the correct dimensions without requiring an appload event or causing a visible flicker.

Written by the indexing model from the issue text.