WebKit中的粘滞导航和旋转木马滞后滚动

时间:2016-04-24 16:31:41

标签: javascript html css zurb-foundation owl-carousel

这是我正在处理的网站:Click here - Home Page Scroll Issue

我正在使用Foundation 5,一个粘性滚动条和Owl Carousel(我尝试过使用Slick轮播,结果是一样的。)

我遇到的问题是,无论何时我向上/向下滚动并且顶部栏越过旋转木马,整个页面都会断断续续,滚动会比预期的轨迹更短暂停止。

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

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

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

此问题仅存在于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完全正常运行。