bug: Fixed slot in ion-modal sometimes behind content in iOS

[tho-masn]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

There is some strange behaviour when using fixed slots in ion-modals in Ionic Vue. Usually the fixed slot should appear above the content of the modal. This works fine in Chrome (Desktop). But as soon as I run the code in the iOS app, the fixed slot is behind the content. I've tried to reproduce the behaviour in a minimal repo: https://github.com/tho-masn/ionic-issues/tree/v5_modal_fixed_slot_overlap
Same is happening in Ionic Vue 6.0.0-rc.3: https://github.com/tho-masn/ionic-issues/tree/v6_modal_fixed_slot_overlap

I've also tried to debug it with the Safari Devtools. Looks like as soon as I update any CSS property of the ion-modal component some rerendering happens and the fixed slot appears above the content.

Chrome (correct):

iOS (wrong):

Expected Behavior

Fixed slots should always appear in the front.

Steps to Reproduce

Check out the Repo URLs and run it on your iOS device.

Code Reproduction URL

Ionic Vue v5.9.1: https://github.com/tho-masn/ionic-issues/tree/v5_modal_fixed_slot_overlap
Ionic Vue v6.0.0-rc.3: https://github.com/tho-masn/ionic-issues/tree/v6_modal_fixed_slot_overlap

Ionic Info

No response

Additional Information

No response

[averyjohnston]

Hi, thanks for the issue. I'm able to replicate this behavior, both in Vue and React. While the fixed slot is part of ion-content, it looks like this is specifically happening when the content is inside an ion-modal. 🤔

[averyjohnston]

I've resolved this via #24300 and the fix will be available in a future release of Ionic.

In the meantime, adding transform: translateZ(0) to the element(s) in the fixed slot will do the trick 👍

[tho-masn]

Awesome, thanks for the quick fix!

[maximilianschmid]

Great, thx for the fast response!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.