Anti-aliasing on rotated div with border image in

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

transform: rotate(0.0005deg);

FireFox 34

This works for me.

Answer 2

I had a very similar issue in Firefox, in which the transforming div was having a thin border outline, I fixed it by giving the div a transparent border. May be this can help.

Answer 3

I have the same problem with Firefox and Safari. 1 thin line between sibbling divs.

Try also different combinations of:

border-radius: 2px 0 0 0;

or

border-radius: 0 1px 0 0;

on problematic element.

This seems to work primarily in Firefox and a bit in Safari. In Safari you also have to cause overlapping positioned elements.

Answer 4

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.