3D CSS变换，Firefox中的锯齿边缘

Question

与Chrome中的“css transform, jagged edges in chrome”类似，Firefox在3D变换中也会出现相同的问题，例如：http://jsfiddle.net/78d8K/5/（<- 记住：Firefox）。

这一次，backface-visibility也没有帮助:(

有什么想法吗？

- abernier

---

这是一个更新版本，支持Webkit：http://jsfiddle.net/78d8K/6/ - Blender

不要在这里关注 Webkit（没问题），这里是关于 Firefox 的 :) - abernier

请在此处为该错误投票：https://bugzilla.mozilla.org/show_bug.cgi?id=766345 - HRJ

Answer 1

编辑后的答案：（根据评论）

“解决方法”：添加一个透明的outline属性：

outline: 1px solid transparent;

在Firefox 10.0.2 Windows 7上测试通过：http://jsfiddle.net/nKhr8/ 原始答案（与背景颜色相关）：

“解决方法”，添加一个与您的背景颜色相同的border属性（在这种情况下为白色）。

border: 1px solid white;

在Firefox 10.0.2 Windows 7上测试通过：http://jsfiddle.net/LPEfC/

- Juan Mellado

---

如果没有其他答案，你将获得悬赏奖励 :) - abernier

Firefox 21.0在Xubuntu上没有反锯齿效果，在这里任何示例都无法工作。 :( - Ivo Pereira

我没想到这会有助于消除一个经过rotate(15deg)旋转的PNG图像img内部的锯齿状边缘，但很奇怪，它做到了！ - Roman Starkov

在使用边框顶部（指针提示）时，Mac上的FF浏览器无法正常工作。不过这很有意思。 - Wes Foster

太棒了。非常感谢 :) - Jimish Fotariya

Answer 2

如果您想要防止边框出现抗锯齿效果，

以下方法对我来说效果更好：

border: 1px solid rgba(0, 0, 0, 0.1); 

如果边框应该清晰可见，这可能不是完美的解决方案，最好遵循 @Juan 的答案。

下面是魔方转动的截图

- Rafik Bari

---

当被接受的解决方案无法使用时，这对我在 Mac Firefox 上有效。 - Maros

Answer 3

除了使用outline之外，以下方法也有效：

box-shadow: 0 0 0 1px transparent;

- Renaat De Muynck

Answer 4

filter:blur(.25px); 对我来说很有效，看起来也不会太模糊。

例如：https://codepen.io/Grilly86/pen/QWLXBbX（尝试编辑（S）CSS中的第22行）

- grilly