Horizontal CSS skew in Firefox blurs box element vertically - css

Question

I am finding that applying a transform:skewX() to an element blurs its poition vertically(!) in Firefox. Does anyone know why, or how to fix this?
HTML
<div id="tab"><span>Tab</span></div>
<div id="content">Content</div>
CSS
#tab {
display: inline-block;
margin-left: 2em;
position: relative;
width: 3em;
text-align:center;
padding: .375em 0 0.125em;
}
#tab span {
position: relative;
z-index: 10;
}
#tab:before,
#tab:after {
position: absolute;
content: '';
top: 0;
width: 60%;
height: 100%;
border-top: 2px solid #999999;
background-color: #ffffff;
z-index: 1;
}
#tab:before {
left: 0;
transform: skewX(-20deg);
border-left: 2px solid #999999;
border-top-left-radius: 6px;
}
#tab:after {
right: 0;
transform: skewX(20deg);
border-right: 2px solid #999999;
border-top-right-radius: 6px;
}
#content {
border: 2px solid #999999;
border-radius: 6px;
padding: 4px;
margin-top: 0px;
}
The result is as below (zoomed image). Note the #content box's border showing through where they don't overlap, and the fuzziness at the top of the tab (both above and below the 2px width). By comparrison, when removing the skewX() for a straight tab, the border becomes pixel-perfect.
Is there any way to force the element's vertical pixel-alignment when it is subjected to a skewX() transform?