html - 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 after transform，你应该把它们放在之前：

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