滚动时 WebKit 中的粘性导航和轮播滞后

Question

这是我正在处理的站点：Click here - Home Page Scroll Issue。

我正在使用 Foundation 5，一个粘性滚动条和 Owl 旋转木马（我尝试使用 Slick 旋转木马，结果是一样的）。

我遇到的问题是，每当我滚动 up/down 并且顶部栏越过旋转木马时，整个页面会断断续续，并且滚动颠簸和停止的时间比预期轨迹短。

我尝试了很多解决方案，包括将 z-index 和 -webkit-transform: translateZ(0) 规则应用于轮播，但都没有成功。

这个问题在 Firefox 或 Edge 中似乎不存在，或者至少没有那么明显。

有什么想法吗？

Answer 1

此问题仅存在于 Chrome。问题似乎是 WebKit 有时不能很好地处理分层。

以下是最适合我的解决方案： 1) 用 div:

包裹 owl-carousel class

<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 的正常运行。

滚动时 WebKit 中的粘性导航和轮播滞后

Sticky navigation and carousel lag in WebKit on scroll

html

javascript

css

zurb-foundation

owl-carousel