Почему в мобильном Safari анимация не срабатывает с первого раза?

Question

[Дмитрий]

Везде анимация работает идеально, проблема только в мобильном сафари.

Вот на этом сайте на главной просскрольте до выбора айфона или айпада и выберите что-то одно. Выбираете модель устройства, вас должно перебросить на следующий шаг. По-идее там через .5s должна появиться кнопка "Оформить". Везде так и происходит, а в мобильном сафари – нет. Но зато если нажать на первый шаг и снова вернуться на второй, анимация сработает. Также, если просто обновить страницу, то анимация тоже сработает с первого раза.

Анимация не работает с первого раза, только если переходить на страницу выбора с Главной. Во всех других случаях анимация отрабатывает правильно.

Вот код анимации, если вдруг нужно:

#step2 .problem {

  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: showTiket;
          animation-name: showTiket;
  -webkit-animation-delay: .5s;
          animation-delay: .5s; }

@-webkit-keyframes showTiket {
  0% {
    bottom: -170px; }
  100% {
    bottom: 0%; } }

@keyframes showTiket {
  0% {
    bottom: -170px; }
  100% {
    bottom: 0%; } }

Я пробовал использовать bottom: 0%;, bottom: 0;, bottom: 0px;.

Answer 1

[Дмитрий]

Решением оказалось заменить bottom на transform: translateY.