3D CSS transform, jagged edges in Firefox

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

If you want to prevent anti-aliased border

Below worked better for me

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

if the border should be clearly visible, this might not be the perfect solution though, in which you'd better stick to @Juan's answer.

Below is a taken screenshot of the cube turning

enter image description here

Related