플렉스 슬라이더 이미지가 흐릿 해짐

Question

플렉스 슬라이더를 사용하여 내 웹 사이트에 슬라이드 쇼를 만들고 있습니다. 첫 번째 이미지는 잘 나옵니다. 그러나 다음 이미지가 나타나기 전에 슬라이드 쇼 아래로 깜박이며 이미지가 흐릿하고 인식되지 않는 것처럼 보입니다.

여기 내 Jquery입니다. 심상에 연결은 중요하지 않다 그래서 나는 그것을 포함한다. 이 같은 슬라이더를 초기화하는 동안 CSS 전환을 비활성화 할 수

<link rel="stylesheet" href="library/public/designs/flexslider/flexslider.css" type="text/css" media="screen" /> 
<script defer src="library/public/designs/flexslider/jquery-flexslider.js"></script> 
<script src="library/public/designs/flexslider/jquery-easing.js"></script> 
<script src="library/public/designs/flexslider/jquery-mousewheel.js"></script> 
<script defer src="library/public/designs/flexslider/demo.js"></script> 

<script> 
// Can also be used with $(document).ready() 
$(window).load(function() { 
    $('.flexslider').flexslider({ 

selector : ".slides > div.tile" 


    }); 
}); 
</script> 


<style> 
.flexslider .slides > div.tile { 
    display: none; 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; /* Chrome and Safari */ 
    -moz-backface-visibility:hidden; /* Firefox */ 
    -ms-backface-visibility:hidden; /* Internet Explorer */ 
} 
.flexslider { 
    margin: 0; 
    background: #fff; 
    border: 0; 
    position: relative; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    -o-box-shadow: none; 
    zoom: 1; 
} 
.flex-control-nav { 
     width: 100%; 
     position: absolute; 
     right: 10px; 
     top: 10px; 
     text-align: right; 
    z-index: 100; 
} 
.flex-control-nav li { 
    margin: 0 2px; 
} 
.flex-control-paging li a { 
    border: none; 
    width: 11px; 
    height: 11px; 
    display: block; 
    background: #ddd; 
    cursor: pointer; 
    text-indent: -9999px; 
    border-radius: 0; 
    box-shadow: none; 
    font-size: 0; 
} 
.flex-control-paging li a:hover { 
    background: #0068b3; 
} 
.flex-control-paging li a.flex-active { 
    background: #0068b3; 
    cursor: default; 
} 
.flex-direction-nav { 
    *height: 0; 
} 
.flex-direction-nav a { 
    width: 30px; 
    height: 30px; 
    margin: -20px 0 0; 
    display: block; 
    background: url(library/public/designs/flexslider/bg_direction_nav.png) no-repeat 0 0; 
    position: absolute; 
    top: 50%; 
    cursor: pointer; 
    text-indent: -9999px; 
    opacity: 0; 
    -webkit-transition: all .3s ease; 
} 
.flex-direction-nav .flex-next { 
    background-position: 100% 0; 
    right: -36px; 
} 
.flex-direction-nav .flex-prev { 
    left: -36px; 
} 
.flexslider:hover .flex-next { 
    opacity: 0.8; 
    right: 5px; 
} 
.flexslider:hover .flex-prev { 
    opacity: 0.8; 
    left: 5px; 
} 
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { 
    opacity: 1; 
} 
.flex-direction-nav .flex-disabled { 
    opacity: .3!important; 
    filter: alpha(opacity=30); 
    cursor: default; 
} 
</style> 

Answer 1

시도 : 나를 위해

<script> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
      selector: ".slides > div.tile", 
      useCSS: false 
     }); 
    }); 
</script> 

, 다음과 같이 CSS-전환을 비활성화는 다른 문제의 무리를 해결했다. 아직 모든 브라우저가 flexslider에서 CSS 전환에 사용할 준비가되지 않은 것 같습니다.

Answer 2

때때로 플러그인

내 솔루션은 Math.floor를 넣어했다, 소수, 와 십진수로 잘 CSS 3의 전환, 웹 키트 나던 작업을 사용하여 키우면 이후 전환을 계산() statment 그것은 위치를 계산한다.

Seach for this : return (posCalc * -1) + "px"; 그리고 이것을 위해 변경하십시오 : return Math.floor (posCalc * -1) + "px";