ARTICLE AD BOX
I have an open dialog and interacting with it will update some of the UI behind it, I have view transitions enabled and a semi-transparent ::background on the dialog.
The issue is when the view transitions play then anything that has a view-transition-name appear over the ::background during the transition, is there any way to resolve this?
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);
}
<dialog>
<button onclick="moveEm()">Click me to transition things</button>
</dialog>
<div id="things">
<div style="view-transition-name: --one;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff1-b1149b17.jpg"></figure>
One
</div>
<div style="view-transition-name: --two;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff2-9504c294.jpg"></figure>
Two
</div>
<div style="view-transition-name: --three;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff3-8d7156b4.jpg"></figure>
Three
</div>
<div style="view-transition-name: --four;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff1-b1149b17.jpg"></figure>
Four
</div>
<div style="view-transition-name: --five;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff2-9504c294.jpg"></figure>
Five
</div>
<div style="view-transition-name: --six;">
<figure><img src="https://jeffsum.oliverturner.cloud/assets/jeff3-8d7156b4.jpg"></figure>
Six
</div>
</div>
![Why Gemini/Claude cant fix this web design? :/ [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded)