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

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