WebKit中的粘性导航和轮播延迟

Question

This is the site I am working on: Click here - Home Page Scroll Issue .

I am using Foundation 5, a sticky scrollbar and Owl Carousel (I have tried using Slick carousel and the result is the same).

The issue I'm experiencing is that whenever I scroll up/down and the top bar goes over the carousel, the whole page stutters and the scroll bumps and stops shorter than its expected trajectory.

I have tried a lot of solutions including applying z-index and -webkit-transform: translateZ(0) rules to the carousel with no success.

This problem doesn't seem to exist in Firefox or Edge or at least is not as obvious.

Any ideas?

Answer 1

This issue only exists in Chrome. The issue seems to be that WebKit does not handle layering very well sometimes.

Here is the solution that worked perfectly for me: 1) Wrap owl-carousel class with a 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) add the following CSS:

.carousel-wrapper { -webkit-transform: translate3d(0, 0, 0);}

I do realise that I've posted this question before and accepted an answer that seemingly worked, but later realised that it broke my navigation bar. The solution above will both get rid of the flicker issue and keep the topbar fully functioning.