Home/ Questions/Q 8798701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:09:11+00:00

I have a problem with 3D-Transforms on Images. For example: transform: rotateY(60deg); It works

  • 0

I have a problem with 3D-Transforms on Images.
For example:

transform: rotateY(60deg);

It works fine everywhere except Firefox on Windows XP. The image is displayed jagged there (no anti-aliasing?). It looks nice with Safari, Chrome and with Firefox on Windows 7 and Mac OS X. Also tested different versions of Firefox with no other results.

I couldn’t find any description or solution of the same problem. Some write that giving a (transparent) border/outline helps to improve the edges but it doesn’t help inside the image.

I made a fiddle here: http://jsfiddle.net/8Tx6X/4/

Here is how it looks in Firefox 16.0.1 on Windows 7 (and other browsers) compared to Firefox 16.0.1 on Windows XP:
https://i.stack.imgur.com/NePyd.png

Anyone experienced the same behaviour?

Could it be a problem with hardware/software-rendering?
(I tested on XP with a virtual machine and an old laptop)

I would love to find a hack or at least a way to detect if it is displayed correctly.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Some more investigation brought me a little bit further. It’s not a problem with Windows XP as I thought first. The problem occurs if Firefox doesn’t use hardware acceleration. When I turn that off (in Options -> Advanced -> General -> Use hardware acceleration when available), it looks jagged on Windows 7 too. I also tested on another computer with WinXP where the image looks fine. You can see if Firefox is using hardware acceleration when you type in “about:support” and look for “WebGL Renderer” and “GPU Accelerated Windows”.

    So I guess Firefox’s software renderer can’t do any better right now.

    What I do now is detect if WebGL is activated and therefore hardware acceleration is available. This is the code I use (it’s from an old version of 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;

    If the test passes I serve CSS-3D-Transforms. Otherwise the user sees a flash fallback.

    • 0