css - 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 the parent is transformed (at least with scale and rotate). This occurs on pseudo-elements of the children as well

.container { 
    transform:rotate(-45deg); 
}
.child {
    border:3px solid white; background:green;
}

jsFiddle to work with

I have tested on the newest Chrome and IE, the problem is on both

How can I get rid of this outline without using box-shadow or removing the transform?

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