• Hi, I’m Patrick. I post experiments and articles of interest here. Sometimes I post on Twitter as @preynolds and more rarely on GitHub.

Hardware Acceleration for Safari and iPhone

Once in a while when developing sites for iPhone and mobile Safari, I implement CSS3 animations, transforms and other rich content. Sometimes, I notice a screen flicker, or glitch in the rendering of my content. There is a quick and dirty workaround that should help alleviate these woes if you are in the same boat. What we are doing here is letting the GPU do some of the heavy lifting by putting the object in 3d space. Of course, you should probably test it on a range of devices first, and you should probably know that it uses more memory.

.element{
  -webkit-transform: translate3d(0,0,0);
}

There is a good write up over at webkit.org that talks about optimizing transitions. For example, you will get smoother transitions and animations if you transform position with the following.

Cross browser compatible, and slow.

$('element').tween('left', [0, -250]);

Chrome and Safari and fast.

-webkit-transform: translate(x,y);

I haven't decided if I'm going to turn on comments or not. In the meantime, send an e-mail to patrick@vunction.com if you have questions or comments.