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/

在Chrome中缩放css时的工件

1 个答案: