在Chrome中缩放css时的工件

Question

检查这个jsFiddle:http://jsfiddle.net/XXrSD/1/

代码也产生如下:

HTML:

<div class="outer">
<div class="head">head</div>
<div>
    test
</div>
</div>

CSS:

.outer {
    border: 10px solid brown;
    margin: 10px;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
}

.head {
    height: 25px;
    background-color: brown;
}

您可以看到,当缩放到0.6(和0.3)时,Chrome会留下瑕疵(外边框和#head div之间的间隙).但它在Firefox中看起来不错.我猜是因为Chrome无法处理非整数像素.有什么我可以做的来解决这个问题吗？

Answer 1

这是因为在缩放时将抗锯齿应用于对象边缘.浏览器错误地计算了需要重绘的区域.留下的部分是对象部分的重影,这些部分未包含在要重绘的区域中.

-webkit-backface-visibility: hidden;缩放/转换对象时添加将解析Chrome中这些奇怪的外观.

更新示例:http: //jsfiddle.net/robaldred/XXrSD/2/