PHP webdeveloper and frontend developer




Jagged edges with CSS transform in Google Chrome (webkit)

Category : Web development · by Mar 24th, 2013

When applying css transform on an element with a background image, the edges will appear jagged in Google Chrome. Also the image will appear pixelated. To fix this you can add this to your css selector: (this will only work for webkit browsers)

 I’ve added a small demo here

The first image in the screenshot below doesn’t use the -webkit-backface-visibility property. The second does. It not only smoothens out the image but also removes the pixalation in the image itself.

Jagged edges on css transform in Google Chrome

 This is the html to demo this effect:

SHARE :

(1) Comment

zac
4 years ago · Reply

hey, loved the chosen sample image. that trick didn’t work though.but these ones did for me:

and

In my case ,I had a rotated div (like a frame, with paddings) with an image inside. The image had jagged border and the translateZ trick fixed it but moved the jagged borders to the frame div, which was fixed with outline. Quite odd isn’t it?(needed that only for iOS, for the rest it was fine)cheers

Leave a Reply

Your email address will not be published. Required fields are marked *


s