スクロールのWebKitのスティッキーナビゲーションとカルーセルラグ

Question

これは私が取り組んでいるサイトです：Click here - Home Page Scroll Issueです。

私はFoundation 5、スティッキースクロールバーとOwl Carouselを使用しています（私はSlickカルーセルを使用しようとしましたが結果は同じです）。

私が経験している問題は、上下にスクロールして上部のバーがカルーセルを越えると、ページ全体がスタッターし、スクロールバンプが予想される軌道よりも短く停止することです。

私はz-indexと-webkit-transform：translateZ（0）ルールをカルーセルに適用することを含め、多くのソリューションを試しましたが、成功しませんでした。

この問題は、FirefoxやEdgeには存在しないようですが、少なくとも明らかではありません。

アイデア？

Answer 1

この問題はChromeにのみ存在します。この問題は、WebKitがレイヤリングをうまく処理できないことがあるようです。 divと 1）ラップowl-carouselクラス：

<div class="carousel-wrapper"> 
      <div class="large-8 columns" data-equalizer-watch> 
       <div id="owl-slider" class="owl-carousel owl-theme"> 
        <div><img src="img/carousel/IMG_1332.JPG"></div> 
        <div><img src="img/carousel/IMG_1334.JPG"></div> 
        <div><img src="img/carousel/IMG_1349.JPG"></div> 
        <div><img src="img/carousel/IMG_1350.JPG"></div> 
       </div> 
      </div> 
</div> 

2）以下のCSSを追加：私は私を実現行う

.carousel-wrapper { -webkit-transform: translate3d(0, 0, 0);} 

をここで

は私のために完全に働いたソリューションです。前にこの質問を投稿し、一見うまくいった答えを受け入れましたが、後でそれがナビゲーションバーを壊したことに気付きました。上記の解決策は、フリッカーの問題を取り除き、 topbarを完全に機能させたままにします。