3D CSS transform, jagged edges in Firefox

css firefox antialiasing css-transforms

abernier · Feb 10, 2012 · Viewed 27k times · Source

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?

Answer

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