Odd Firefox rendering (css transform) - firefox

Question

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)
Here I made an example that looks fabulous in Chrome, but with a jagged border in Firefox:
http://jsfiddle.net/eBJxV/4/
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?
here's the code you can also see in JSFiddle
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;
}

Answer 1

You can fix it with a CSS filter:
filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');
Here is the jsfiddle:
http://jsfiddle.net/eBJxV/14/
Note that this info (and more) is convered on a blog post I wrote a while ago on the subject:
http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
Hope this helps.

Answer 2

used to this for old Firefox -moz
As like this
h1 {
-moz-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
-moz-transform: rotate(-4deg) translate3d( 0, 0, 0);
}

Answer 3

Solved it, by adding a border with 1px with, and the same background color.
Then apply box-sizing differently, sot that the border is part of the size.
Then due to padding, had to change the width.
http://jsfiddle.net/eBJxV/19/
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;
border-style: solid;
border-color: #E8501F;
border-width:1px;
transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
transform: rotate(-4deg) translate3d( 0, 0, 0);
box-sizing: border-box;
outline: 1px solid transparent;
-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:140px;
font-weight:bold;
font-family:Verdana;
color:#ffffff;
}
body{
background-color:#FFF;
}
<h1>JSFiddle</h1>
<h1>Shiddle</h1>