Проблемы позиционирования/рендеринга в Safari (OSX и iPad) при добавлении пульсирующей анимации CSS. ⇐ CSS

[Anonymous]

Я хотел создать пульсирующую анимацию на изображении, центрированном по вертикали и горизонтали, используя анимацию CSS. Это отлично работает в Firefox и Chrome (мобильные версии и версии OSX). Но в Safari что-то не так, позиционирование изображения неправильное.

Странно то, что после переключения рабочих столов (проведите тремя пальцами влево или вправо) и возврата в Safari изображение позиционируется правильно.

Я создал jsfiddle, чтобы показать проблему, я исключил все префиксы, кроме -webkit.

JSfiddle здесь: https://jsfiddle.net/stxnt1sb/9/

HTML

Код: Выделить всё

[img]http://lorempixel.com/600/400/sports/[/img]

CSS

Код: Выделить всё

article{
position:relative;
width:600px;
height:400px;
overflow:hidden;
}
img{
position:absolute;
top:50%;
left:50%;
width:100%;
-webkit-transform:translate(-50%,-50%);
-webkit-animation-name: pulse;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(-50%, -50%) scale(1) ;
}
33% {
-webkit-transform:  translate(-50%, -50%) scale(1.05);
}
100% {
-webkit-transform: translate(-50%, -50%) scale(1) ;
}
}

Изображение позиционируется абсолютно внутри относительного контейнера по центру с помощью перевода (-50%, -50%). Пульсация выполняется с помощью CSS-анимации, анимирующей масштаб изображения.

Подробнее здесь: https://stackoverflow.com/questions/353 ... pulse-anim