Choppy CSS3 animation on iPhone 4

Question

I have a pretty simple (or at least I think it is) animation. All I'm animating is the -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%; }
}

It works nicely in Safari on the desktop, but on the iPhone, the animation is very choppy. Which is odd, because I've seen lots of demonstrations of CSS animation on my iPhone that run silky smooth. Am I going about this animation the wrong way?

Basically, it's a speech bubble that starts out at 0%, scales up to 100%, then 95%, then 100%. Sort of like a bounce-out ease effect.

Answer 1

You must do some trickery to allow the GPU to kick in, if you can scale the whole div instead of just the background then this will make it smooth...

#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); }
}