Question

我在图像上有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上使用虚拟机和旧笔记本电脑进行了测试）

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

Answer 1

更多的调查让我更进一步。我认为这不是Windows XP的问题。如果Firefox不使用硬件加速，则会出现此问题。当我关闭它时（在选项 - ＆gt;高级 - ＆gt;常规 - ＆gt;可用时使用硬件加速），它在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。否则，用户会看到闪回后备。

Answer 2

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

在Windows XP上使用CSS 3D变换的锯齿状图像

2 个答案: