antialiasing - Anti-aliasing on rotated div with border image in firefox

Question

I have a div rotated 45 degrees, with a border image on it.

In chrome and safari, it renders fine.

In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.

Here's the simple HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

and here's the CSS:

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;

    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

and here's a JSFiddle. Look at it in firefox to see what I mean:

http://jsfiddle.net/uAF2u/

I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.

Anyone run into this before and know of a way to sort it?

Answer 1

Adding a translateZ seems to quick in a more accurate display and solve the issue:

-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);

updated fiddle

I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.