Весь браузер глючит/мерцает во время анимации преобразования CSS ⇐ Html

[Anonymous]

Я прикрепил ссылку на запись экрана моей проблемы, спрашиваю здесь, так как не могу найти примеры этой проблемы где-либо еще, и я пробовал различные возможные решения, такие как обертывание элемента с помощью TranslateZ(0) или использование Contain: Paint и т. д., но безуспешно.
Я включил приведенный ниже код в том виде, в котором он был у меня до добавления того, что я нашел в Интернете.
Надеюсь, кто-нибудь сталкивался с этим. Спасибо
[https://imgur.com/a/uE5DvcN][1]
функция App() {
return (





)
}

const images: string[] = [image1, image2, image3, image4, image5, image6, image7, image8];

export default function SliderCarousel() {
return (

{images.map((image, i) => {
return (



)
})}

)
}

.slider{
position: absolute;
width: 200px;
height: 250px;
top: 10%;
left: calc(50% - 100px);
transform-style: preserve-3d;
transform:
perspective(1000px);
animation: autoRun 20s linear infinite;
will-change: transform;
z-index: 1;
}

@keyframes autoRun {
from{
transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
}to{
transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
}
}

.item {
position:absolute;
inset: 0;
transform:
rotateY(calc((var(--position) - 1 ) * (360 / var(--quantity)) * 1deg ))
translateZ(500px);
will-change: transform;
}

.item img{
width: 100%;
height: 100%;
object-fit: cover;
}



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