Barzev Barzev - 1 year ago 132
HTML Question

Sticky navigation lag on scroll

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

-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?

**Update, Ajay Varghese's answer seems to help for the down scroll, but the issue still exists when scrolling up. When duplicating the next content row to increase the length of the page, if you try to scroll up to reveal the carousel it jumps and creates a scroll stutter. This issue is very annoying and I still can't seem to find the cause.

Answer Source

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: body { -webkit-transform: translate3d(0, 0, 0);}

Hope this helps someone and saves their precious time.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download