Неустойчивая анимация CSS3 на iPhone 4

Question

У меня довольно простая (или, по крайней мере, я так думаю) анимация. Все, что я оживляю, это -webkit-background-size.

#bubble { position:relative; width:397px; height:326px; background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; -webkit-background-size:100% 100%; -webkit-animation-name:resize; -webkit-animation-duration:1s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function: ease-in; }

@-webkit-keyframes resize {
    0% { -webkit-background-size:0% 0%; }
    90% { -webkit-background-size:100% 100%; }
    95% { -webkit-background-size:95% 95%; }
    100% { -webkit-background-size:100% 100%; }
}

Хорошо работает в Safari на рабочем столе, но на iPhone анимация очень прерывистая. Что странно, потому что я видел много демонстраций CSS-анимации на моем iPhone, которые работают гладко и гладко. Я иду об этой анимации неправильно?

По сути, это речевой пузырь, который начинается с 0%, масштабируется до 100%, затем до 95%, затем до 100%. Вроде как эффект легкости отскока.

Answer 1

Вы должны сделать некоторую хитрость, чтобы позволить GPU включиться, если вы можете масштабировать весь div вместо только фона, тогда это сделает его гладким ...

#bubble { 
  position:relative; 
  width:397px; 
  height:326px; 
  background:url('../img/mobile/webkit/bubble.png') no-repeat bottom right; 
  -webkit-background-size:100% 100%; 
  -webkit-animation: resize 1s ease-in 1; /*shorthands are better!*/
  -webkit-transform: scale3d(100%, 100%, 1);
}

@-webkit-keyframes resize {
    0% { -webkit-transform: scale3d(0%, 0%, 1); }
    90% { -webkit-transform: scale3d(100%, 100%, 1); }
    95% { -webkit-transform: scale3d(95%, 95%, 1); }
    100% { -webkit-transform: scale3d(100%, 100%, 1); }
}

Answer 2

Попробуйте добавить -webkit-transform: transform to the bubble css