3D CSS transform, jagged edges in Firefox

CssFirefoxAntialiasingCss Transforms

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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

Solution 3 - Css

Apart from using outline, the following works as well:

box-shadow: 0 0 0 1px transparent;

Solution 4 - Css

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)

Categories
Recommended Css Solutions
Recommended Firefox Solutions
Recommended Antialiasing Solutions
Recommended Css Transforms Solutions

Previous Solution:

How can val() return Number?

JavascriptJqueryStringNumbers

Next Solution:

How to remove the last word in a string using JavaScript

Javascript

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionabernierView Question on Stackoverflow
Solution 1 - CssJuan MelladoView Answer on Stackoverflow
Solution 2 - CssRafik BariView Answer on Stackoverflow
Solution 3 - CssRenaat De MuynckView Answer on Stackoverflow
Solution 4 - CssgrillyView Answer on Stackoverflow