Css -webkit-backface-visibility在旋转的div上显示白点

Question

我有一个DIV，它被旋转：

transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);

那里很好，但是当我添加

时

-webkit-backface-visibility: hidden;

这些白点......

有什么想法吗？ - 谢谢！

DEMO：http://jsfiddle.net/X5WKM/

Answer 1

您已经清楚地意识到这些点是由-webkit-backface-visibility属性引起的。这似乎是Chrome v26- 中的一个错误，正如NOX所评论的那样，似乎已经在v27中修复了（我自己检查了一下，这个问题在Windows 7的v27中仍然存在）。

简单的快速修复包括替换：

* {
    margin:0;
    padding:0;
    transform: translate3d(0,0,0);
}

使用：

* {
    margin:0;
    padding:0;
    transform: translate3d(0,0,0);
}

#nav, #topp, #footer {
    -webkit-backface-visibility: hidden;
}

这会从您的-webkit-backface-visibility和#top元素中删除#foo属性 - 这似乎不会造成任何伤害。

这是JSFiddle example这个，我已经将页眉和页脚的背景设为黑色，以便更容易看到点已不再存在。

---

作为旁注，您应该始终将供应商前缀放在真正的CSS属性之前。不应在 -ms-transform之后放置-webkit-transform和transform ，而应将它们放在：

之前

-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);