css transform, jagged edges in chrome
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.
-webkit-backface-visibility: hidden;
If you are using transition instead of transform, -webkit-backface-visibility: hidden; does not work. A jagged edge appears during animation for a transparent png file.
To solve it I used: outline: 1px solid transparent;
Adding a 1px transparent border will trigger anti-aliasing
outline: 1px solid transparent;Alternatively, add a 1px transparent box-shadow.
box-shadow: 0 0 1px rgba(255,255,255,0);