Slick: Issue with top-bar and slick carousel

[barzev]

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?

[ http://envirodental.group.shef.ac.uk/test/index.html ]

Steps to reproduce the problem

1. Scroll up and down the page. Especially scroll up. Also, carousel would flicker when scrolling down if there is margin between carousel and topbar
   

What is the expected behaviour?

No, lag/flicker

What is observed behaviour?

Lag/flicker when scrolling

More Details

• Happens on Chrome and IE from my testing
• Latest versions of jquery and slick.
• I've always had this problem and I can't solve it

[leggomuhgreggo]

Hey @barzev Hmm, I didn't see the issue on my Chrome/Chromium. Can you recreate in a reduced test case? Thanks!

Closing: no fiddle, probz not a bug

[Digital25]

I had the same problem. It was solved by
body { -webkit-transform: translate3d(0, 0, 0);}

[barzev]

@Digital25, thank you my friend! You just solved this for me. I have been looking for a solution for more than a week!