css - 在 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/