Проблема с бесконечной рамкой CSS в iOS Safari и Chrome ⇐ CSS

[Anonymous]

Я создал бесконечную область выделения, но столкнулся с проблемой на устройствах iOS при использовании Chrome или Safari. После завершения анимации в следующем кадре на короткое время отображается текст в начальной позиции перед повторным запуском анимации. Однако эта проблема не возникает на устройствах Android или в эмуляторе мобильных устройств Chrome в инструментах разработчика на компьютере.
Как изменить свой код, чтобы он правильно работал на устройствах iOS?
Проблема с выделением
Вот код, который я использую для бесконечного выделения


Lorem ipsum dolor, sit amet consectetur adipisicing elit.



.marquee {
height: 26px;
position: relative;
text-wrap: nowrap;
max-width: 500px;
overflow: hidden;
border: 1px solid black;
}

.marquee-item {
position: absolute;
height: 100%;
left: 100%;
animation: marquee-animation 5s infinite linear;
}

@keyframes marquee-animation {
0% {
left: 100%;
transform: translateX(0);
-webkit-transform: translateX(0);
}

100% {
left: 0%;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}


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