3D CSS Transform, Jagged Edges in Firefox

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/

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/

Jagged edged border issue in Firefox

You can use border-style: inset;

CSS

.btn-play { 
  border-left:50px inset black;
  border-top:40px inset rgba(255, 255, 255, 0);
  border-bottom:40px inset rgba(255, 255, 255, 0);
}

DEMO HERE

css transform, jagged edges in chrome

In case anyone's searching for this later on, a nice trick to get rid of those jagged edges on CSS transformations in Chrome is to add the CSS property -webkit-backface-visibility with a value of hidden. In my own tests, this has completely smoothed them out. Hope that helps.

-webkit-backface-visibility: hidden;

---

Related Topics