1

我对图像上的 3D 变换有疑问。例如：

transform: rotateY(60deg);

除了 Windows XP 上的 Firefox，它在任何地方都可以正常工作。图像在那里显示为锯齿状（没有抗锯齿？）。在 Windows 7 和 Mac OS X 上使用 Safari、Chrome 和 Firefox 看起来不错。还测试了不同版本的 Firefox，没有其他结果。

我找不到相同问题的任何描述或解决方案。有些人写道，提供（透明）边框/轮廓有助于改善边缘，但对图像内部没有帮助。

我在这里做了一个小提琴：http: //jsfiddle.net/8Tx6X/4/

与 Windows XP 上的 Firefox 16.0.1 相比，它在 Windows 7（和其他浏览器）上的 Firefox 16.0.1 中的外观如下：http: //i.stack.imgur.com/NePyd.png

有人经历过同样的行为吗？

可能是硬件/软件渲染的问题吗？（我在 XP 上使用虚拟机和旧笔记本电脑进行了测试）

我很想找到一个黑客或至少一种方法来检测它是否正确显示。

4

2 回答 2

1

更多的调查让我更进一步。正如我首先想到的那样，这不是 Windows XP 的问题。如果 Firefox 不使用硬件加速，则会出现此问题。当我关闭它时（在选项 -> 高级 -> 常规 -> 可用时使用硬件加速），它在 Windows 7 上看起来也参差不齐。我还在另一台装有 WinXP 的计算机上进行了测试，图像看起来不错。当您输入“about:support”并查找“WebGL Renderer”和“GPU Accelerated Windows”时，您可以查看 Firefox 是否正在使用硬件加速。

所以我猜 Firefox 的软件渲染器现在不能做得更好。

我现在要做的是检测 WebGL 是否被激活，因此硬件加速是否可用。这是我使用的代码（来自旧版本的 Modernizr）：

try {
    var canvas = document.createElement('canvas'),ret;
    ret = !!(window.WebGLRenderingContext && (canvas.getContext('experimental-webgl') || canvas.getContext('webgl')));
        canvas = undefined;
} catch (e){
    ret = false;
}
return ret;

如果测试通过，我会提供 CSS-3D-Transforms。否则，用户会看到闪退。

于 2012-11-02T20:18:46.397 回答
0

我在 Windows 7 上使用 Firefox 时遇到了同样的问题。正如你所说，边缘可以修复，但内容（我没有使用图像，但绝对定位的 HTML 元素）看起来很糟糕，但在 Chrome 和 Safari 中它们很好.

于 2012-10-26T07:40:53.383 回答