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?

回答1:

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/

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/

回答2:

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

回答3:

Apart from using outline, the following works as well:

box-shadow: 0 0 0 1px transparent;

回答4:

filter:blur(.25px); works for me and doesn't looks too blurry.

Example: https://codepen.io/Grilly86/pen/QWLXBbX (try editing line 22 in the (S)CSS)

来源：https://stackoverflow.com/questions/9235342/3d-css-transform-jagged-edges-in-firefox