CSS-рамка с дублированными гибкими группами перекрывается в Firefox, но работает в Chrome ⇐ CSS

[Anonymous]

Я пытаюсь создать простую бесконечную горизонтальную карусель, используя чистый CSS.

Идея состоит в том, чтобы дублировать контент и непрерывно переводить его, чтобы цикл выглядел бесшовным.
Это работает правильно в Chrome, но в Firefox вторая группа перекрывает первую во время анимации (например, вторая 1 2 3 появляется поверх 4 5 6 из первой группы).

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

123
456


123
456




body { background:#444; margin:0; }

.carousel{
width:90%;
margin:100px auto;
border:5px solid red;
display:flex;
overflow:hidden;
}

.group{
display:flex;
gap:1em;
flex:0 0 auto;
width:max-content;
animation: spin 5s linear infinite;
}

.card{
flex:0 0 5em;
height:5em;
display:grid;
place-items:center;
background:cornflowerblue;
font-size:3rem;
border-radius:.2em;
}

@keyframes spin{
from{ transform:translateX(0); }
to  { transform:translateX(-100%); }
}

https://codepen.io/Manu-_/pen/VYKeQJr

Подробнее здесь: https://stackoverflow.com/questions/799 ... -in-chrome