How to prevent jagged edges when using CSS transformations in Mobile Safari

On the iPad and iPhone, using CSS transformations in Mobile Safari often results in elements with ugly jagged or stair stepped edges.

In most cases it’s easy to get nice anti-aliased edges by wrapping whatever you want to transform in an additional element that adds a few pixels padding:

<style>
#wrapper {
  -webkit-transform: rotateZ(5deg);
  -webkit-backface-visibility: hidden;
  padding: 2px;
}
</style>

<div id="wrapper"><img src="appie.jpg"></div>

Note that this technique doesn’t work when -webkit-backface-visibility is set to visible (which is the default).

Here’s a demo page in case you want to see for yourself (only shows jagged edges on an iPad, iPhone or iPod Touch).