Z-индекс игнорируется при переходе с использованием API View Transitions. ⇐ CSS

[Anonymous]

Примечание. В приведенном ниже примере используется API View Transitions, который пока поддерживается не во всех браузерах. В Firefox этот код не будет выполнять переходы и, следовательно, не покажет мою проблему.
Что я пытаюсь сделать >

Используя API View Transitions, я переключаюсь между двумя элементами. Это происходит, когда пользователь нажимает на элемент, при этом открывается (своего рода) модальное окно над списком элементов с красивым переходом.
Проблема, с которой я столкнулся< /strong>

Похоже, API не очень хорошо соблюдает порядок стека (

Код: Выделить всё

z-index). Самая большая проблема заключается в том, что .overlay.backdrop

проходит над элементом, находящимся в переходе. Только когда переход завершен, вы можете увидеть, как элемент «загорается» и переходит на задний план. Я также не могу понять, как заставить выбранный элемент перемещаться по другим элементам во время перехода.
Совет: вы можете ясно увидеть, что происходит, если установите скорость анимации на 10 %. в инструментах разработчика Chrome.

Что я попробовал[/b]

• Разные способы изменения структуры DOM и z-index элементов.
• Я поигрался с псевдоэлементом ::view-transition-group (ссылка на документацию) в своем CSS, но, поскольку я устанавливаю имена своих элементов динамически, я не думаю, что можно это использовать?

У меня действительно есть понятия не имею, как это еще отладить.

Код: Выделить всё

const { ref } = Vue;

const app = Vue.createApp({
setup() {
const items = [
{
id: 1,
title: 'Diablo 4',
description: 'A shit game with a decent story',
},
{
id: 2,
title: 'Elden Ring',
description: 'A good game with a shit story',
},
{
id: 3,
title: 'The Witcher 3',
description: 'A good game with a good story',
},
{
id: 4,
title: 'Cyberpunk 2077',
description: 'A shit game with a shit story',
},
];

const activeItem = ref(null);

const setActiveItem = (item) => {
if (!document.startViewTransition) {
activeItem.value = activeItem.value === item ? null : item;
return;
}

document.startViewTransition(() => {
activeItem.value = activeItem.value === item ? null : item;
});
};

return {
items,
activeItem,
setActiveItem
};
}
});

app.mount('#app');

Код: Выделить всё

.box {
background-color: lightblue;
cursor: pointer;
position: relative;
z-index: 1;
}

.box.small {
padding: 1rem;
}

.box.big {
padding: 2rem;
font-size: 1.5rem;
margin: 2rem;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1rem;
}

.overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 11;
}

.overlay.backdrop {
view-transition-name: overlay;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}

body {
margin: 0;
display: grid;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

Код: Выделить всё

{{ activeItem.title }}

{{ activeItem.description }}






{{ item.title }}

У кого-нибудь есть идеи, как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/791 ... itions-api