CSS diagonal border aliasing in Firefox - html

Question

I drew a shape by using the border properties in CSS. It looks fine in Chrome, but in Firefox the borders are really ugly:
.shape
{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #3F7296;
position: relative;
color: #FFF;
line-height: 50px;
font-size: 40px;
}
.b1, .b2
{
position: absolute;
left: 100px;
bottom: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 50px 16px;
border-color: transparent transparent transparent #3F7296;
}
.b2
{
left: -16px;
border-width: 50px 16px 0px 0px;
border-color: transparent #3F7296 transparent transparent;
}
<div class="shape">
<i class="b1"></i>
<i class="b2"></i>
</div>
Fiddle: http://jsfiddle.net/Ly1dz111/
Screenshot from Chrome:
Screenshot from Firefox (Mac OS X)
How can I fix this in Firefox?

Answer 1

This is a known bug in Firefox's handling of diagonal borders, and the workaround is to set a scale transform on the element so that Firefox is forced to run it through an extra graphics step.
In your example, the solution is to set -moz-transform: scale(.9999) on the .b1 and .b2 elements. This forces antialiasing in Firefox.
.shape
{
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #3F7296;
position: relative;
color: #FFF;
line-height: 50px;
font-size: 40px;
}
.b1, .b2
{
position: absolute;
left: 100px;
bottom: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 50px 16px;
border-color: transparent transparent transparent #3F7296;
-moz-transform: scale(.9999)
}
.b2
{
left: -16px;
border-width: 50px 16px 0px 0px;
border-color: transparent #3F7296 transparent transparent;
}
<div class="shape">
<i class="b1"></i>
<i class="b2"></i>
</div>