Unwanted outline on border when parent is transformed

Question

I am using borders on some content. However, I am finding an unwanted 1px outline the same color as the background color is being added around the border when t

Answer 1

In chrome you should be able to use -webkit-backface-visibility: hidden; to fix this. I'm not too sure about IE, I don't have anything to test that on right now.

http://jsfiddle.net/ayFbD/4/

Answer 2

Add a translateZ(1px)

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:rotate(-45deg); 
}

(not really sure why does this work ...)

fiddle

Seems that IE needs more fixing...

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:perspective(999px) translateZ(1px) rotate(-45deg); 
}

fiddle2

Answer 3

Not a great fix, but adding backface-visibility: hidden; which determines if the element should be visible or not when it's faced away from the screen, commonly used when you "flip" and element, seems to fix it, at least in Chrome. I haven't got the possibility to test in IE though.

The reason I tried it is because this "hack" has solved simliar issues that I've had before. But I'm not really sure why it works ...

jsFiddle