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;
}

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

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

附带说明一下，您应该始终将供应商前缀放在真正的 CSS 属性之前。您应该将它们放在前面，而不是将-ms-transformand放在-webkit-transform 后面： transform

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