CSS анимация не работает на iPhone / iOS12.2

Question

Ниже анимация css отлично работает на старых версиях iOS.

Однако, она не работает должным образом на последней версии iOS12.2.Анимация запускается и работает при первом посещении сайта.Но после перезагрузки браузер не запускает анимацию.

Какие-нибудь решения?

.button {
 display: block;
 width: 400px;
 height: 50px;
 background-color: gray;
 position: relative;
}
.button:before {
  position: absolute;
  left: -75%;
  width: 25px;
  height: 50px;
  content: '';
  display:block;
  background-color: white;

  -webkit-animation: shine 1.5s ease 0.5s infinite normal;
  animation: shine 1.5s ease 0.5s infinite normal;
}

@-webkit-keyframes shine {
  0% { left: -75%;}
  50%, 100% { left: 125%; }
}

@keyframes shine {
  0% { left: -75%; }
  50%, 100% { left: 125%; }
}

<a class="button">Hello
</a>

Answer 1

Попробуйте следующий пример - прежде чем очищать кеш браузера:

.button {
 display: block;
 width: 400px;
 height: 50px;
 background-color: gray;
 position: relative;
}
.button::before {
  position: absolute;
  left: 100px;
  width: 25px;
  height: 50px;
  content: '';
  display:block;
  background-color: white;

  -webkit-animation: shine 1.5s ease 0.5s infinite normal;
  animation: shine 1.5s ease 0.5s infinite normal;
}

@-webkit-keyframes shine {
  0% { left: -100px;}
  50%, 100% { left: calc(100% + 80px); }
}

@keyframes shine {
  0% { left: -100px; }
  50%, 100% { left: calc(100% + 80px); }
}

<a class="button">Hello
</a>