粘滯導航和旋轉木馬滯後在WebKit滾動

這是我工作的網站：Click here - Home Page Scroll Issue。粘滯導航和旋轉木馬滯後在WebKit滾動

我正在使用基金會5，粘性滾動條和貓頭鷹旋轉木馬（我曾嘗試使用滑動輪播和結果是相同的）。

我遇到的問題是，每當我向上/向下滾動並且頂部欄超過傳送帶時，整個頁面都會停頓，滾動顛簸並停止比預期軌跡更短。

我已經嘗試了很多解決方案，包括將z-index和-webkit-transform：translateZ（0）規則應用於旋轉木馬，但沒有成功。

這個問題似乎並不存在於Firefox或Edge中，或者至少不是那麼明顯。

任何想法？

來源

2016-04-24 Barzev

當我通過Chromium 50看到它時表現非常好。 – user6245342

檢查下面的答案。儘管試圖修復它幾個星期，但我在發佈後一分鐘就解決了它。 – Barzev

此問題僅在Chrome中存在。這個問題似乎是WebKit有時不能很好地處理分層。

這裏是一個完全爲我工作的解決方案： 1）裹owl-carousel類與div：

<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的完整運作。

來源

2016-04-24 16:42:09 Barzev

粘滯導航和旋轉木馬滯後在WebKit滾動

回答

相關問題