Unwanted outline on border when parent is transformed

问题

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?

回答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

回答2:

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

回答3:

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/

来源：https://stackoverflow.com/questions/21004108/unwanted-outline-on-border-when-parent-is-transformed

标签

css

css3

rendering

border

css-transforms