3D CSS transform, jagged edges in Firefox

by

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

More Related Contents:

  1. Anti-aliasing on rotated div with border image in firefox
  2. CSS transform doesn’t work on inline elements
  3. Custom CSS Scrollbar for Firefox
  4. Targeting only Firefox with CSS
  5. How to remove Firefox’s dotted outline on BUTTONS as well as links?
  6. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  7. CSS 3d transform doesn’t work if perspective is set in the end of property
  8. Simulating transform-origin using translate
  9. Background-image in keyframe does not display in Firefox or Internet Explorer
  10. How to prevent Webkit text rendering change during CSS transition
  11. firefox overflow-y not working with nested flexbox
  12. CSS Transform Skew [duplicate]
  13. Font-size issues comparing chrome and Firefox
  14. Prevent flex item from exceeding parent height and make scroll bar work
  15. rotate3d shorthand
  16. Webfont Smoothing and Antialiasing in Firefox and Opera
  17. CSS3 transform order matters: rightmost operation first
  18. Firefox ignores padding when using overflow:scroll
  19. Why is text getting blurry and wobbles during 2d scale transform
  20. Faster way to develop and test print stylesheets (avoid print preview every time)?
  21. Scrollbar color change in Firefox
  22. CSS3 Transform affecting other elements with chrome/safari
  23. Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
  24. placing background image in a rhombus shaped container is causing the container to lose its shape
  25. Hide Up & Down Arrow Buttons (Spinner) in Input Number – Firefox 29
  26. Preventing an image from being draggable or selectable without using JS
  27. perspective and translateZ moves diagonally
  28. position relative in firefox [duplicate]
  29. Firefox blurs an image when scaled through external CSS or inline style.
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment