-webkit-transform and ignored z-index - html

Question

On safari 5.1.7 for windows, some rotated elements are cutting through others elements:
While on other browsers Firefox, Chrome, IE I get:
Is there a way to avoid the 'cutting' issue on safari ?
A jsfiddle showing the issue 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>

Answer 1

In most cases, z-index does not apply to an element that does not have a 'position' attribute. Try this
For instance :
position:relative;
z-index: 10;
I don't have a Safari browser to test it in.

Answer 2

Found the following:
By using rotateY we are adding a new dimension to our 2D classic output.
In this browser z-index don't work in 3D.
There is however a way to solve my issue:
.test1 {
background-color:green;
z-index: 30;
-moz-transform: rotateY(0deg) scale(1.2);
-webkit-transform: rotateY(0deg) scale(1.2) translate3d(0, 0, 50px);
transform: rotateY(0deg) scale(1.2);
}
By applying translate3d to .test1 the green and the black block are no more on the same z plan.
test1 is on the z plan where z=50px ( without translate3d it was on z=0px )
test2 is an 'Oblique' plan somewhere bettween -50px<z<50px