When transitioning to the main_page, z-index is not behaving correctly on Chrome but works fine on Firefox. Even after setting the z-index first and then applying the transition, there is a delay in how it acts. Any assistance would be greatly appreciated.
//flip function begins
window.$zindex=0;
$flip_left=function(e){
//$('.zindex').removeClass("zindex");
$this=$(this);
$this.css({"z-index":window.$zindex});
setTimeout(function(){
$this.addClass("flip");
$this.removeClass("flipin");
$this.addClass("flip_right");
window.$zindex+=1;
if($('.main_page').hasClass("flip")){
$('.main_row').css({"margin-left":"75px"});
} else {
$('.main_row').css({"margin-left":"0px"});
}
},100);
}
$flip_right=function(e){
//$('.zindex').removeClass("zindex");
$this=$(this);
$this.css({"z-index":window.$zindex});
setTimeout(function(){
$this.removeClass("flip");
$this.addClass("flipin");
$this.removeClass("flip_right");
window.$zindex+=1;
if($('.main_page').hasClass("flip")){
$('.main_row').css({"margin-left":"75px"});
} else {
$('.main_row').css({"margin-left":"0px"});
}
},100);
}
//all functions called here
$(document).ready(function() {
$(document).on("click", ".flipin", $flip_left);
$(document).on("click", ".flip_right", $flip_right);
});.page_holder, body, .page p, div{
margin:0;
padding:0;
}
.wrapper_center{
width:150px;
margin:0 auto;
margin-top:60px;
}
.row, .page, .main_page, .page_holder, .page p, .page img, .shadow{
width:100%;
}
.row, .page, .main_page, .page_holder, .page p, .page img, .shadow{
float:left;
}
.main_page, .main_row, .flip{
transition:all 1.2s ease;
-webkit-transition:all 1.2s ease;
}
.zindex{
z-index:1000;
}
.page_holder{
perspective:1800px;
-webkit-perspective:1800px;
-moz-perspective:1800px;
height:200px;
}
.relative, .page_holder{
position:relative;
}
.main_page{
list-style:none;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-origin:left;
-moz-transform-origin:left;
transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
height:200px;
position:absolute;
z-index:0;
}
.page{
position:absolute;
height:200px;
-moz-backface-visibility:hidden;
box-shadow:rgba(0,0,0,0.02) -3px 3px 5px;
}
.page p{
color:#fff;
}
.side1{
transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
z-index:1
}
.flip{
transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
z-index:0;
}
.page1{background:#06F}
.page2{background:#F60}
.page3{background:#999}
.page4{background:#FF0}
.page5{background:#66C}
.page6{background:#000}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="wrapper_center">
<div class="row main_row">
<ul class="page_holder">
<li class="main_page flipin">
<div class="page page6 side1">
</div><!--page ends-->
<div class="page page5 side2">
</div><!--page ends-->
</li>
<li class="main_page flipin">
<div class="page page2 side1">
</div><!--page ends-->
<div class="page page1 side2">
</div><!--page ends-->
</li>
<li class="main_page flipin">
<div class="page page4 side1">
</div><!--page ends-->
<div class="page page3 side2">
</div><!--page ends-->
</li>
<li class="main_page flipin">
<div class="page page2 side1">
</div><!--page ends-->
<div class="page page1 side2">
</div><!--page ends-->
</li>
</ul>
</div><!--row ends-->
<div class="ajax_json">
</div><!--ajax_json ends-->
</div><!--center wrapper ends-->
</body>