css - Chrome : transform scale and blurred edges

Question

如何去除蓝色 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

您可以将 border: 1px solid blue; 添加到 #testElement 但这是肮脏的解决方案，因为边框也会缩放，我不确定会怎样影响其他元素。

See DEMO

更好的解决方案是添加任何 webkit 过滤器。例如 -webkit-filter: blur(0px);。

See DEMO

这是 Chrome 中的一些渲染错误(可能在其他浏览器中也存在，未测试)，添加过滤器只是修复了这个问题。我不知道它是如何工作的。