Chrome: transform scale and blurred edges

Question

How remove blurred edges from blue div? http://jsfiddle.net/p4raT/

<div id="testContainer" style="position: absolute; left: 0px; top: 0px; width: 1500px; height: 1500px; background: red; -webkit-transform-origin: 0% 0%;
-webkit-transform: scale(4.7);  ">      
<div id="testElement" style="position: absolute; left: 5px; top: 5px; width: 101px; height: 203px; background: blue;"><div> 
    <div>

Answer 1

You can add border: 1px solid blue; to #testElement but that is dirty solution, because border will be scaled too and I'm not sure how that will affect other elements.

See DEMO

Better solution is to add any webkit filter. For example -webkit-filter: blur(0px);.

See DEMO

This is some rendering bug in Chrome (maybe in other browsers too, not tested) and adding filters simply fixes that. I don't know how but it works.

Answer 2

Recently I had same problem and found that solution that helped me

-webkit-font-smoothing: antialised;

or

backface-visibility: hidden;