title: Odd Firefox rendering (css transform)
body: <p>this new CSS3 stuff is so fancy, but the rendering seems to be really inconsistent among browsers (and I'm not even talking about the shadow shape itself)</p>
  
  <p>Here I made an example that looks fabulous in Chrome, but with a jagged border in Firefox:
  <a href="http://jsfiddle.net/eBJxV/4/" rel="nofollow">http://jsfiddle.net/eBJxV/4/</a></p>
  
  <p>Note that I've added a box-shadow and it looks like the background color shines through.
  For Chrome, there is this workaround with translate3D, is there also something I can do for Firefox?</p>
  
  <p>here's the code you can also see in JSFiddle</p>
  
  <p><code></p>
  
  <pre><code>h1 {
      background-color: #E8501F;
      border-radius: 13px 0 0 13px;
      box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
      display: block;
      font-size: 18px;
      height: 30px;
      letter-spacing: 0.03em;
      padding: 0 20px;
      text-transform: uppercase;
  
      transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
      transform: rotate(-4deg) translate3d( 0, 0, 0);
  
  
      -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
      -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);
  
      margin:10px 0;
      width:100px;
      font-weight:bold;
      font-family:Verdana;
      color:#ffffff;
  }
  
  body{
  background-color:#FFF;
  }
  </code></pre>
  
  <p></code></p>