fix (ion-content): move slot="fixed" inside wrapper div

[ghost]

Short description of what this resolves:

Fix the visibility of the content when passed through slot "fixed".

Changes proposed in this pull request:

• Move slot="fixed" inside the div wrapper, fixes the issue

Ionic Version: 4.10.3

Fixes: #17754

[brandyscarney]

Thank you for the PR! This fix will break the FAB functionality:

master	akshit-wwstay:ion-content-slot-fix

The fixed content needs to be outside of the scrolling div as it should not scroll with the page. I believe the solution to this bug may be to add the following css to content.scss but it would require further testing:

::slotted([slot="fixed"]) {
  position: absolute;
}

🙂

[DavidWiesner]

The problem is a missing z-index. When adding a z-index to the fixed slot, the text is visible again. By default the fixed slot is behind the scroll content. So instead of adding a div there should be set a z-index on the fixed slot or the fixed slot should move above the scroll slot.

[dalemugford]

The problem is a missing z-index. When adding a z-index to the fixed slot, the text is visible again. By default the fixed slot is behind the scroll content. So instead of adding a div there should be set a z-index on the fixed slot or the fixed slot should move above the scroll slot.

I'm finding the reverse— divs with slot="fixed" are always on top of ion-content, with no way to make them below ion-content. This prevents UI choices like having a parallax header with a fixed image behind content that can scroll overtop.

[brandyscarney]

Thanks again for the PR! I added a PR here that should fix this: #19867

I'm going to close this as it has been merged. 🙂