When using Safari 5.1.7 on Windows, I noticed that some rotated elements are overlapping others:
However, when I test it on Firefox, Chrome, and IE, the issue doesn't occur:
Is there a solution to prevent this overlap problem specifically on Safari?
You can view a jsfiddle demonstrating the problem here.
CSS:
.myFlip {
width: 310px;
margin: 20px auto;
-moz-perspective: 780px;
-webkit-perspective: 780px;
perspective: 780px;
}
.myFlip li {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin-right: -70px;
}
.test1 {
background-color:green;
z-index: 30;
-moz-transform: rotateY(0deg) scale(1.2);
-webkit-transform: rotateY(0deg) scale(1.2);
transform: rotateY(0deg) scale(1.2);
}
.test2 {
background-color:black;
z-index: 10;
-moz-transform: rotateY(45deg);
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
HTML:
<ul class="myFlip">
<li class="test1"></li>
<li class="test2"></li>
</ul>