3

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.

dallen
  • 2,621
  • 7
  • 37
  • 47
  • Are you able to post a live demo, somewhere, such as [JS Bin](http://jsbin.com), that those of us with iPhones can check the rendering/behaviour against? – David Thomas Apr 08 '11 at 23:14

2 Answers2

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); }
}
methodofaction
  • 70,885
  • 21
  • 151
  • 164
0

Try to add -webkit-transform:transform to the bubble css

cmplieger
  • 7,155
  • 15
  • 55
  • 83