[BUG] Scroll state of kirby-page not preserved when using image-banner in Safari

[RasmusKjeldgaard]

• I have written a good issue

Describe the bug

In Safari, when navigating back to a page with akirby-x-image-banner, scroll state is not preserved correctly. Even though we use inline-size for the container-query in image-banner, the height does not seem to be correctly calculated for the element when returning back to a page in the stack of an ion-router-outlet. I am unsure if this is a safari + containment issue or if it is a ion-router-outlet + safari + containment issue 🤷

Describe how to reproduce the bug

1. Go to https://stackblitz.com/edit/stackblitz-starters-3jbke7cs in safari. See * below if this does not work.
2. Scroll to the bottom of the page, click 'Go to Page Two', then press the back-button of the new page.
3. Observe that 'Page One' is scrolled all the way to the top. In chromium-browsers, previous scroll state is preserved and you land at the bottom of the page instead.

---

* Safari and stackblitz does not always play nice. If the example never loads, do the following instead:

1. Click on the small "cloud + arrow down" icon to download the example. This is currently needed because stackblitz preview and safari does not play nice.
2. run npm i && npm start locally
3. go to localhost in Safari

Which Kirby version was used?

Kirby Extensions v1.3.0

Add any screenshots

Heres a video showcasing the issue:

safari-missing-scroll-state.mov

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the develop branch following our branch naming convention.
• Create a test that reproduces the bug following guidelines in: "The good: Test".
• Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request.