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

Question

我有一个DIV，它旋转：

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

它很好，但是当我添加时

-webkit-backface-visibility: hidden;

它把这些白点点缀起来..

有任何想法吗？ - 谢谢！

演示： 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;
}

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

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

---

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

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