javascript - Chrome でアニメーション画像スライダーがちらつく

Question

次の画像にスライドした後、前の画像を右にちらつく画像スライダーがあります。何らかの理由で、Google Chrome でのみこれを行っています。スライダーのセットアップは、3 つの個別の画像が並んでいる Div であり、それらの位置は jquery トランジションで変換されるため、別の画像が表示されます。これとちらつきは www.cutephilosophy.com で見ることができます。（通常、スライダーは自動実行になっていますが、この質問ではオフにしました。ちらつきを確認するには、次または前のボタンをクリックしてください）。

CSS と JQUERY トランジション -

.slider{
    width: 960px;
    height: 450px;
    float:left;
}  
p#slide1_controls {
    text-align:center;
}
#slide1_controls span {
    padding-right:2em;
    cursor:pointer;
}
#slide1_container {
    width:690px;
    height:400px;
    float: left;
    overflow:hidden;
    /*margin:0 auto;*/
}
#slide1_images {
    float:left;
    width:2070px;
    -webkit-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -moz-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -ms-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    -o-transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980); 
    transition: all 500ms cubic-bezier(0.505, 0.010, 0.455, 0.980);
    /*-webkit-transition:all 2.0s easeInOutQuad;
    -moz-transition:all 2.0s easeInOutQuad;
    -o-transition:all 2.0s easeInOutQuad;
    transition:all 2.0s easeInOutQuad;*/
}
#slide1_images img {
    padding:0;
    margin:0;
    float:left;
}
.slider{
    float:left;
    width: 960px;
    height: 400px;
    overflow: hidden;
    cursor:pointer;
}

JAVASCRIPT (次/前/自動実行/スライドの関数) -

var $selectedSlide=1;

//var autoSlider = setInterval(nextSlide, 5500);

function nextSlide() {
    if ($selectedSlide!=3) { 
        $("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide)+"px)");
        $selectedSlide=$selectedSlide+1;
        //window.alert("SelectedSlide = "+$selectedSlide);
    }
    else {
        $("#slide1_images").css("transform","translateX(0px)");
        $selectedSlide=1;
    }
}

function prevSlide() {
    //clearInterval(autoSlider);
    if($selectedSlide>1) {
    $("#slide1_images").css("transform","translateX("+-690 * ($selectedSlide-2)+"px)");
    $selectedSlide=$selectedSlide-1;
    }
    else{
        $("#slide1_images").css("transform","translateX(-1380px)");
        $selectedSlide=3;
    }
}

HTML -

<div class="sliderPrev">
<img src="images/SliderImages/SliderPrevBtn.gif" onmouseover="this.src='images/SliderImages/SliderPrevBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderPrevBtn.gif'" onClick="prevSlide();"/>
</div>
<div id="slide1_container" class="shadow" align="left">
  <div id="slide1_images" class="hover">
   <a href="BoldAndClassy.php" target="_blank"> <img src="images/SliderImages/SliderOne.jpg" class="noBorder"/></a>
   <a href="http://www.fubbie.tumblr.com" target="_blank"><img src="images/SliderImages/SliderTwo.jpg" class="noBorder"/></a>
   <a href="http://www.fubbie.tumblr.com" target="_blank"> <img src="images/SliderImages/SliderThree.jpg" class="noBorder"/></a>
  </div>
</div>
<div class="sliderNext">
<img src="images/SliderImages/SliderNextBtn.gif" onmouseover="this.src='images/SliderImages/SliderNextBtnRollover.gif'"onmouseout="this.src='images/SliderImages/SliderNextBtn.gif'" onClick="nextSlide();"/>
</div>