Jagged edges with CSS transform in Google Chrome (webkit)

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)

-webkit-backface-visibility: hidden;

 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:

<!DOCTYPE html>
<html>
<head>
<style>
#container{
	width: 500px;
	margin: 0 auto;
}
#skewed_image
{
	width: 250px;
	height: 250px;
	margin-top: 40px;
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
}

#skewed_image2
{
	width: 250px;
	height: 250px;
	margin-top: 40px;
	transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-webkit-backface-visibility: hidden;
}
</style>
</head>
<body>
	<div id="container">
		<div id="skewed_image" style="background: url('image.jpg') no-repeat center center; background-size: cover;" ></div>
		<div id="skewed_image2" style="background: url('image.jpg') no-repeat center center; background-size: cover;" ></div>
	</div>
</body>
</html>

One thought on “Jagged edges with CSS transform in Google Chrome (webkit)

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

    transform: translateZ(1px) rotate(45deg);

    and

    outline: 1px solid transparent;

    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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s