CODEWITHSUNDEEP
animationcss
dallen
dallen

Reputation: 2651

Choppy CSS3 animation on iPhone 4

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.

Upvotes: 3

Views: 2141

Answers (2)

methodofaction
methodofaction

Reputation: 72405

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

Upvotes: 1

cmplieger
cmplieger

Reputation: 7351

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

Upvotes: 0

Related Questions