6 jun
2017

Prevent flicker on webkit-transition of webkit-transform for other content/containers

I have two set of container, container1 and container2, I tried to hover on slider(container1) had effect for transform and scale the image. but in container2 the image will be affect.

I tried to add the following property in container1 and child image. but no lunk.

  1. transform: translateZ(0);
  2. backface-visibility: hidden;
  3. transform: translate3d(0, 0, 0);

This issue only happening in chrome browser only.

Have any idea to fix add any css in container1, without touch container2 ?

If I remove the property -> postion:relative in .test img means it will work fine. But i don't touch any css in container2.

$("#more").click(function(){
  $(".list").animate({scrollLeft: "+=330"}, 300, "swing");
});
$("#prev").click(function(){
  $(".list").animate({scrollLeft: "-=330"}, 300, "swing");
});
body {
  margin: 5px;
}
.list {
  overflow: hidden;
  height:110px;
  width:330px;
}
ul {
  overflow: hidden;
  width:2000px;
}
li {
  float: left;
}
.box {
  width: 100px;
  height: 100px;
  background: #33cccc;
  margin: 5px;
  display: block;
}
li img {
  width: 100%;
  transition: all .4s ease; */
  width: 100%;
  backface-visibility: hidden;
  transform:translate3d(0,0,0);
  perspective: 1000;
}

li:hover img {
    opacity: .9;
    transform: scale(1.05);
  }
   
  .test img {
    display: block;
    width: 100px;
    position: relative;
    padding: 5px;
    margin: 5px;
    border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="list container1">
  <ul>
    <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
    <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
    <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
    <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
    <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
   <li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li><li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li><li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li><li><span class="box"><img src="https://pbs.twimg.com/profile_images/825159892382019584/hJ_0Aa5_.jpg" ></span></li>
  </ul>
</div>
<button id="prev">prev</button>
<button id="more">more</button>

<div class="container2">
<div class="test">
<img src="https://images.pexels.com/photos/301584/pexels-photo-301584.jpeg" >
</div><div class="test">
<img src="https://images.pexels.com/photos/301584/pexels-photo-301584.jpeg" >
</div><div class="test">
<img src="https://images.pexels.com/photos/301584/pexels-photo-301584.jpeg" >
</div><div class="test">
<img src="https://images.pexels.com/photos/301584/pexels-photo-301584.jpeg" >
</div><div class="test">
<img src="https://images.pexels.com/photos/301584/pexels-photo-301584.jpeg" >
</div>
</div>

Also code added in jsfiddle: http://jsfiddle.net/uXn2p/178/

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation