CODEWITHSUNDEEP
jqueryhtmlcsscss-transitionsz-index
Ravi Sharma
Ravi Sharma

Reputation: 123

google chrome z-index change lag

z-index does not working properly on chrome but its fine on firefox.when the page(main_page) flips its z-index changes to make it come on top but z-index is acting with delay even after applying z-index first and transition later...any help would be wonderful.

//flip function starts
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");
    //alert($('.main_page').length);
    //$this.css({"z-index":window.$zindex});



    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");
    //alert($this.index());

    window.$zindex+=1;


    //$this.css({"z-index":window.$zindex});
    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>

Upvotes: 0

Views: 435

Answers (1)

Max Starkenburg
Max Starkenburg

Reputation: 1539

Since your CSS transition was set to all, it was apparently trying to "transition" the z-index too. If you make the specific transitions you want more explicit with something like:

.main_page, .main_row, .flip{
    transition:transform 1.2s ease, margin 1.2s ease;
    -webkit-transition:transform 1.2s ease, margin 1.2s ease;
}

it seems to behave better. Fiddle: https://jsfiddle.net/gd51m3kn/1/

Upvotes: 1

Related Questions