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;