IE10 random seam rendered when doing translation with border radius
I'm looking for a little advice for what appears to be a rendering error in IE10. I created an animated flip and it works in all browsers that I care about. During testing, I find random lines with borders that show up for no reason. They are not actual border, outlines or shadows applied from what I can tell. It looks like the child elements (like the anchor in the example) are just not rendering correctly.
I know a similar effect can happen in mobile safari and people are using it margin-whatever: -1
, but it doesn't seem to have any effect.
I've reduced the example to the bare minimum required to reproduce the error. It seems if I remove any of these styles the problem goes away.
perspective: 2000px; // Remove and the animation looks awful
border-radius: 6px; // Remove and the modal will look different then all others
-ms-transform: rotateY(0);
transition: all 0.4s ease-in-out;
source to share
My example can help you
body {
background: #555;
}
.pt, .front {
width: 100px;
}
.pt {
margin: 0 auto;
}
.front {
position: absolute;
background: #FFF;
padding: 20px;
transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
transform-origin: 0% 0%;
perspective: 200;
perspective-origin: 50% 50%;
-webkit-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-webkit-transform-origin: 0% 0%;
-webkit-perspective: 200;
-webkit-perspective-origin: 50% 50%;
-moz-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-moz-transform-origin: 0% 0%;
-moz-perspective: 200;
-moz-perspective-origin: 50% 50%;
-o-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-o-transform-origin: 0% 0%;
-o-perspective: 200;
-o-perspective-origin: 50% 50%;
-ms-transform: scale(0.8) scaleZ(1.0) rotateX(9deg) rotateY(9deg);
-ms-transform-origin: 0% 0%;
-ms-perspective: 200;
-ms-perspective-origin: 50% 50%;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
}
source to share