Как исправить работу свойства keyframes на ios?

Question

[Dyadko_Orest]

Я создал текст, который постоянно крутится, используя css. Он хорошо работает на всех устройствах, кроме iPhone. Я добавил префиксы webkit, но все еще на ios, если текст длинный, он перекрывается. Может есть способ исправить это?
Мой код

<div className='endlessly-wrapper'>
      <div className='original'>
        <p>text</p>
      </div>
      <div className='duplicate'>
        <p>text</p>
      </div>
    </div>

.endlessly-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;

  .original {
    display: flex;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: animate;
    animation-name: animate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
  }

  .duplicate {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: animate2;
    animation-name: animate2;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
  }
}

@keyframes animate {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes animate2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

@-webkit-keyframes animate {
  0% {
    -webkit-transform: translateX(100%);
  }

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

@-webkit-keyframes animate2 {
  0% {
    -webkit-transform: translateX(0);
  }

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