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/