letehaha
@letehaha
Вникаю вo front-end

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

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

Вот на этом сайте на главной просскрольте до выбора айфона или айпада и выберите что-то одно. Выбираете модель устройства, вас должно перебросить на следующий шаг. По-идее там через .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;.
  • Вопрос задан
  • 814 просмотров
Решения вопроса 1
letehaha
@letehaha Автор вопроса
Вникаю вo front-end
Решением оказалось заменить bottom на transform: translateY.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы