64

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?

Community
  • 1
  • 1
abernier
  • 27,030
  • 20
  • 83
  • 114

4 Answers4

157

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

Juan Mellado
  • 14,973
  • 5
  • 47
  • 54
  • Interesting :) and actually works on the example... except when the background is no more white: http://jsfiddle.net/LPEfC/1/ I tried with `border-width:0` or `border-color:transparent` or `border-color:rgba(255,255,255,0)` in order the trick to be background-color independent — but does not work anymore... — But interesting workaround, thx! – abernier Feb 18 '12 at 21:53
  • Read my answer again, put the color "of your background" to the border – Juan Mellado Feb 18 '12 at 21:55
  • Running the example in Firefox 10.0.2 on Windows 7 laptop with screen resolution of 1366 x 768 and am still seeing the jagged edges... – mg1075 Feb 19 '12 at 04:26
  • As many GPU drivers allow users to manually configure aliasing behavior, I would be surprised (though, pleasantly) if you could get it looking perfect on all possible configurations. – Joshua Warner Feb 19 '12 at 04:50
  • Edit: background-color border is now a transparent outline – Juan Mellado Feb 19 '12 at 11:22
  • @Juan Mellado - nKhr8 still displays jagged on my laptop in Firefox. (note: Blender's original webkit example has no issues in google chrome on my laptop.) – mg1075 Feb 19 '12 at 14:46
  • @JoshuaWarner The reason this achieves "antialising" is through the presence of an invisible or white one-pixel outer border (the outline). The antialiasing comes out of texture sampling interpolation. Therefore no configuration (unless you are somehow through drivers forcing texture sample to `NEAREST` sampling) for AA (multisample etc) will affect output – Steven Lu Jan 24 '13 at 15:20
  • 2
    Firefox 21.0 in Xubuntu did not antialiased, not working here any of the examples. :( – Ivo Pereira May 20 '13 at 13:16
  • 3
    I didn't expect this to help anti-alias the insides of a PNG `img` that's been `rotate(15deg)` but oddly enough, it does! – Roman Starkov Oct 04 '13 at 18:18
  • 4
    Doesn't work for Mac FF when using a border-top (pointer tip). Interesting though – Wes Foster Dec 31 '13 at 16:08
  • This did not work for my element that has `skew(10deg)` – Taylor A. Leach Nov 22 '18 at 20:31
4

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

Rafik Bari
  • 4,867
  • 18
  • 73
  • 123
1

Apart from using outline, the following works as well:

box-shadow: 0 0 0 1px transparent;
Renaat De Muynck
  • 3,267
  • 1
  • 22
  • 18
-1

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)

grilly
  • 450
  • 4
  • 11