粘滞导航和旋转木马滞后在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滚动

回答

相关问题