Chrome:转换比例和模糊边缘

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但这是一个肮脏的解决方案,因为边框也将缩放,我不知道这将如何影响其他元素.

见DEMO

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

见DEMO

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