Pull to refresh

Если не срабатывает свойство translate при css анимации в мобильном Safari

То, что 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); }			
}

Теперь анимация проигрывается сразу при загрузке страницы.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.