CSS-анимация горизонтальной области выделения Safari против Chrome ⇐ CSS

[Anonymous]

Пожалуйста, посмотрите видео и код ниже.
Может кто-нибудь сказать мне, почему это не работает должным образом в Safari?
Когда я нажимаю от вкладки сафари и обратно все работает как надо. Действительно странно.

.image-container {
will-change: transform;
animation: marquee-horizontal 10s linear infinite;
-webkit-animation: marquee-horizontal 10s linear infinite;
}

/* Marquee animation */
@keyframes marquee-horizontal {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0); /* Adjust based on duplication */
}
}

/* For safari */
@-webkit-keyframes marquee-horizontal {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0); /* Adjust based on duplication */
}
}


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