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

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

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