I have a Svelte app with a list whose items have the built-in flip animation once they move. The items have a menu which is absolutely positioned inside of them and has a z-index of 10. The issue is: As soon as flip animation runs, the menu gets behind the other items. I have recreated this in the following REPL:
https://svelte.dev/repl/9d2f70193508421db3619a6d14bd3495?version=3.49.0
Questions.
I have already played around with isolation: isolate, other z-index values, select the task which is currently being moved, but nothing seems to work.
Why?
Because the transform needed for the animation introduces a new stacking context and the menu is a part of it due to the hierarchy. The z-index will be relative to the new stacking context which only includes the item, hence the menu can never be on top of anything else.
Fix?
Do not add the menu to the item. Move it high up in the hierarchy, e.g. directly into the <body>. You can re-parent elements e.g. using an action (see suggestions in this issue about <body> injection).
Positioning will require a bit more effort. You can use getBoundingClientRect to get the relevant information for the target element.
Workaround?
Maybe close all menus on animation? (And increase their speed.)