simple css3 animation is not smooth on safari and iPad UIWebView

Question

I am trying move a block of text using css3 animation. The animation is not smooth on safari and iPad UIWebview. Here is the code . Is there a way to make it lot smoother? It is more noticeable when I animate an image. I have used different timing function but still it is not smooth.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> div { width:100px; height:100px; position:relative; -webkit-animation-name: mymove; -webkit-animation-duration: 2s; -webkit-animation-fill-mode:forwards; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes mymove { from {left:0px;} to {left:200px;} } </style> </head> <body> <div>Move this block</div> </body> </html>

Mircea · Accepted Answer · 2016-11-28 11:57:47Z

You can try to "force hardware acceleration" by adding -webkit-transform: translateZ(0) on the animated div

Try it here: http://jsfiddle.net/aHWzN/

Update: You can now use will-change to ensure smoother animations: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

.foo {will-change: left}

Alex Grande · Accepted Answer · 2012-05-18 18:29:01Z

It has to do what composite layer that minimizes repaints. You can turn this on in about:flags in Chrome to see composite layers, called "Composited render layer borders."

When you use -webkit-transform: translate3d(0,0,0) it often "kicks" it into composite layer. It also prepares it for animations.

For instance, if you have an image carousel, if you are animating the images, first put -webkit-transform: translate3d(0, 0, 0); on the img.

But that alone won't fix your animation flickering in iPad.

By specifying the timing function, it better handles the animation and you will have smooth results.

-webkit-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); is easing in and out.

Yesterday, I made a simple sliding image carousel that works smoothly on iPad 1. https://github.com/grandecomplex/imagecarousel

sabes · Accepted Answer · 2011-11-28 17:53:58Z

You might want to take a look at my coworker's blog post. He discusses iOS animation performance in depth along with a video showing the performance differences between iOS versions. http://uncorkedstudios.com/2011/11/18/animation-performance-disparity-on-ios/

Collectives™ on Stack Overflow

simple css3 animation is not smooth on safari and iPad UIWebView

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related