Почему на разных устройствах анимация работает по-разному в одном браузере?

Ссылка на codepen с полным кодом данного элемента: https://codepen.io/VladimirR04/pen/YzjyxyK

.carr__card {
 width: 300px;
 height: 200px;
 background-color: #442222;
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: flex-end;
 top: 35px;
 left: 125px;
 font-size: 0.8rem;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
 text-align: center;
 animation-name: slider;
 -webkit-animation-name: slider;
 -moz-animation-name: slider;
 animation-duration: 24s;
 -webkit-animation-duration: 24s;
 -moz-animation-duration: 24s;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-timing-function: linear;
 -webkit-animation-timing-function: linear;
 -moz-animation-timing-function: linear;
 }

В Chrome на iOS отображается так:

На android тоже в Chrome:

Нашёл проблему, но не знаю как её решить, свойство perspective не работает на android chrome browser, можете подсказать чем заменить?