Search code examples
cssfirefoxantialiasingcss-transforms

3D CSS transform, jagged edges in Firefox

Similary to "css transform, jagged edges in chrome", same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/ (<- remember: Firefox)

This time, backface-visibility doesn't help :(

Any idea?

Solution

  • Edited answer: (after comments)

    "Workaround", add a transparent outline attribute:

    outline: 1px solid transparent;

    Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/

    enter image description here

    Original answer: (background-color dependent)

    "Workaround", add a border attribute with the same color of your background (white this case):

    border: 1px solid white;

    Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/

    enter image description here