Просмотр перехода, появляющегося в диалоговом окне `::background` ⇐ CSS

[Anonymous]

У меня есть открытый диалог, и взаимодействие с ним обновит часть пользовательского интерфейса, стоящего за ним, у меня включены переходы просмотра и полупрозрачный ::background в диалоговом окне.
Проблема в том, что при воспроизведении переходов просмотра все, что имеет имя-перехода просмотра, появляется поверх ::background во время перехода, есть ли способ решить эту проблему?

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

document.querySelector('dialog').showModal();

const moveEm = () => {
const container = document.getElementById('things');
const items = Array.from(container.children);

for (let i = items.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[items[i], items[j]] = [items[j], items[i]];
}

document.startViewTransition(() => {
items.forEach(item => container.appendChild(item));
})
}

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

#things {
display: flex;
flex-direction: column;
gap: 1em;
}

#things > div {
outline: 1px solid black;
background-color: lightblue;
display: flex;
align-items: center;

figure {
flex-grow: 0;
width: 100px;

img {
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1/1;
}
}
}

dialog::backdrop {
background-color: rgb(0 0 0 / 0.5);
}

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

Click me to transition things





[img]https://jeffsum.oliverturner.cloud/assets/jeff1-b1149b17.jpg[/img]

One


[img]https://jeffsum.oliverturner.cloud/assets/jeff2-9504c294.jpg[/img]

Two


[img]https://jeffsum.oliverturner.cloud/assets/jeff3-8d7156b4.jpg[/img]

Three


[img]https://jeffsum.oliverturner.cloud/assets/jeff1-b1149b17.jpg[/img]

Four


[img]https://jeffsum.oliverturner.cloud/assets/jeff2-9504c294.jpg[/img]

Five


[img]https://jeffsum.oliverturner.cloud/assets/jeff3-8d7156b4.jpg[/img]

Six

Подробнее здесь: https://stackoverflow.com/questions/798 ... background