-webkit-transform:rotate() fix for iOS

I spent hours today trying to make tilted images look decent on iOS. I found many posts about Chrome and its lack of anti-aliasing, but nothing about jagged border images on the iPad – which is all I care for for now.

I tried every possible workaround I found on the web, from wrapping the images in a div to using -webkit-transform-style:preserve-3d or even -webkit-transform:rotateZ(-5deg), but none of that worked.

Using a pseudo element to mask the edge of the image solves the issue, but is somewhat limited as it requires authors to declare a border color that matches the background of the document.

I kept hacking at this until I decided to wrap the images in a div and style them with -webkit-background-clip:padding-box. That combination made the trick and images showed very clean edges (see screenshot below).

Note that real images (img elements) looks slightly better in Safari, but I don’t think the difference warrants to sandbox the technique for iOS only.

transform:rotate(10deg)

CSS

#first-image { 
    -moz-transform:rotate(10deg);
    -o-transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    transform:rotate(10deg);    
}
#seconde-image { 
    width:190px;
    height:240px;
    background:url(https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/-webkit-transform-rotate-and-anti-aliasing/hawk.jpg) no-repeat;
    text-indent:-900em;
    -moz-transform:scaleX(-1) rotate(10deg);
    -o-transform:scaleX(-1) rotate(10deg);
    -webkit-transform:scaleX(-1) rotate(10deg);
    transform:scaleX(-1) rotate(10deg);    
    -webkit-background-clip:padding-box; /* IOS fix */
    background-clip:padding-box; /* IOS fix */
}

Markup

<img id="first-image" src="https://css-101.org/wp-content/themes/pdp2el2eea4t8lgnlodsp145683/files/articles/-webkit-transform-rotate-and-anti-aliasing/hawk.jpg" alt="hawk">
<div id="seconde-image">Image of a hawk</div>

iPad screenshot

image by btaroli