4

1ページで複数のセクションがあり、それぞれにコンテンツDIVとフレックススライダーが含まれているWebサイトがあります。より大きな画面では、スライドアニメーションで背景がちらつく原因となる奇妙なバグがあるようです。ここで、アクションを実行します：http: //yyy.comuf.com/PORT/

ページに複数のフレックススライダーがあるためだと思いますが、それを修正する最善の方法がわかりません。

JS

  $(window).load(function() {
$('#main-slider').flexslider({
  animation: 'slide',
  controlsContainer: '.flex-container'
});

$('#secondary-slider').flexslider();

}）;

HTMLスライダー-1

<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/FP1.png" />
    </li>
    <li>
      <img src="img/abcd.png" />
    </li>
    <li>
      <img src="img/i-eg.png" />
    </li>
  </ul>
</div>

HTMLスライダー-2

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/OU.png" />
    </li>
    <li>
      <img src="img/OU1.png" />
    </li>
    <li>
      <img src="img/OU2.png" />
    </li>
  </ul>
</div>

両方のスライダーは現在、異なる画像を除いて同じです。

メインのJSファイルはここにあります：http：//yyy.comuf.com/PORT/js/jquery.flexslider.js

4

2 に答える 2

3

これはcss33d変換の多くのバグによる問題であり、新しいパラメーターを使用できます

useCSS：false

新しいプラグインバージョンに含まれています。このオプションは、新しいブラウザー（css変換を実装するwebkit 1）にjquery4アニメーションの使用を強制します。私はこのように解決しました。この問題はChromeバージョン21でのみ発生しますが、Safari6では発生しません。

于 2012-09-03T11:20:35.607 に答える
3

別のオプションは使用することです

-webkit-transform: translateZ(0);

コンテナ要素に適用します。

私はここで答えを見つけました： https ：//stackoverflow.com/a/16718476/1031184

そしてそれは私にとって完璧に機能しました。また、cssTransitionsを使用できることも意味します。これは、私が理解していることから、モバイルデバイスでのリソースの負荷が少ないことを意味します。

于 2013-09-15T19:43:17.200 に答える