粘滞导航和旋转木马滞后在WebKit滚动
问题描述:
这是我工作的网站:Click here - Home Page Scroll Issue。粘滞导航和旋转木马滞后在WebKit滚动
我正在使用基金会5,粘性滚动条和猫头鹰旋转木马(我曾尝试使用滑动轮播和结果是相同的)。
我遇到的问题是,每当我向上/向下滚动并且顶部栏超过传送带时,整个页面都会停顿,滚动颠簸并停止比预期轨迹更短。
我已经尝试了很多解决方案,包括将z-index和-webkit-transform:translateZ(0)规则应用于旋转木马,但没有成功。
这个问题似乎并不存在于Firefox或Edge中,或者至少不是那么明显。
任何想法?
答
此问题仅在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
的完整运作。
当我通过Chromium 50看到它时表现非常好。 – user6245342
检查下面的答案。尽管试图修复它几个星期,但我在发布后一分钟就解决了它。 – Barzev