[BUG] kirby-section-header visible through kirby-tab-navigation

RasmusTraeholt commented 5 months ago

[x] I have written a good issue

Describe the bug

The kirby-section-header is visible through the kirby-tab-navigation

Describe how to reproduce the bug

Implement a kirby-page with a kirby-tab-navigation and Insert a kirby-section-header within the kirby-page's kirby-page-content. Scroll down and see that the kirby-section-header is visible through the kirby-tab-navigation

Which Kirby version was used?

9.4.1

What was the expected behavior?

That the kirby-tab-navigation is always on top of any elements placed within the kirby-page-content

Add any screenshots

https://github.com/kirbydesign/designsystem/assets/23026215/31a9bc82-e451-46bd-9269-2076af2ec4c8

Please complete the following information:

Testet on

Browser [Chrome]
Browser version [124.0.6367.60]

Are there any additional context?

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.

RasmusKjeldgaard commented 5 months ago

Reproduced here: https://stackblitz.com/edit/stackblitz-starters-4b9twh

One workaround is for kirby-section-header to be positioned, to be able to set z-index to a proper value, e.g.

kirby-section-header {
  z-index: 0;
  position: relative;
}

You can try it out in the stackblitz by adding back the style rule I commented out.

jkaltoft commented 5 months ago

I suggest we use isolation to create the stacking context to avoid any issues that may come up when using relative positioning.

kirby-section-header {
  isolation: isolate;
}

However, there seems to be a bug in Firefox, so maybe we can't use isolation even though the property is designed specifically for these kinds of layout challenges.

Another possible solution could be to reset the z-index of ion-item-divider in this context. We just need to make sure there are no side effects.

kirbydesign / designsystem