Geek Answers Handbook

Unwanted boundary circuit when transforming a parent

I use borders for some content. However, I find an unwanted 1px outline of the same color as the color backgroundthat is added around the border when the parent transforms (at least with scaleand rotate). This also happens on pseudo-elements of children.

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

jsFiddle to work with

I tested the latest Chrome and IE, the problem on both

How can I get rid of this circuit without using box-shadowor removing the transform?

+4
source share
3 answers

Add translation Z (1px)

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

(not quite sure why this works ...)

fiddle

, IE ...

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

2

+6

, backface-visibility: hidden;, , , , , "" , , , , Chrome, IE.

, , , "" , . , ...

jsFiddle

+1

chrome -webkit-backface-visibility: hidden;, . IE, , .

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

0
source

More articles:


All Articles