То, что Safari стал для верстальщиков новым IE6 ни для кого не новость. Сегодня столкнулся с очередным багом, решение которого банально до невозможности, но отняло у меня час рабочего времени.
Итак, имеем блок, который должен непрерывно плавать вверх-вниз. Сходу пишем стандартный для такой анимации код:
.block {
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 3.0s;
-webkit-animation-duration: 3.0s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes floating {
0% {transform: translateY(0%);}
50% {transform: translateY(8%);}
100% {transform: translateY(0%);}
}
@-webkit-keyframes floating {
0% {-webkit-transform: translateY(0%);}
50% {-webkit-transform: translateY(8%); }
100% {-webkit-transform: translateY(0%); }
}
Тестируем и видим, что данный код работает во всех популярных браузерах, кроме мобильного Safari. Причём согласно спецификации он должен поддерживать этот код. Далее замечаем ещё одну особенность. Если перейти в другое приложение или по какой-то ссылке и вернуться назад, то анимация начинает работать. Очень странное поведение Safari. То есть сам код ему понятен, но при обновлении страницы анимация сразу не хочет проигрываться.
Долгие поиски по различным форумам ни к чему не привели, поэтому решение было найдено методом «научного тыка».
Решение:
Чтобы анимация проигрывалась сразу в мобильном Safari надо проценты смещения в translate заменить на пиксели.
@-webkit-keyframes floating {
0% { -webkit-transform: translateY(0px); }
50% { -webkit-transform: translateY(30px); }
100% { -webkit-transform: translateY(0px); }
}
Теперь анимация проигрывается сразу при загрузке страницы.
Автор: весёлый усач
