-webkit-transform rotate - Pixelated images in Chrome

html css google-chrome transform
davivid picture davivid · Feb 22, 2011 · Viewed 52.7k times · Source

Using -webkit-transform: rotate(-5deg); on a container div, Chrome renders the grid of images with really jagged edges. Whereas in FF (-moz-transform:) and IE (-ms-filter:) everything looks OK - see the difference below.

Is there any thing I can do about this?

chrome ff

Answer

Christian Westman picture Christian Westman · Aug 14, 2011

You could check out the answer to the question css transform, jagged edges in chrome

Helped me out

From the accepted answer:

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More