Sticky Navigation und Karussell Verzögerung in WebKit auf Bildlauf

Question

Dies ist die Website, an der ich arbeite: Click here - Home Page Scroll Issue.

Ich benutze Foundation 5, eine klebrige Scrollbar und Owl Carousel (Ich habe versucht mit Slick Karussell und das Ergebnis ist das gleiche).

Das Problem, das ich erfahre ist, dass, wenn ich scrolle nach oben/unten und die obere Leiste über das Karussell geht, stottert die ganze Seite und die Scroll-Bumps und stoppt kürzer als seine erwartete Flugbahn.

Ich habe viele Lösungen einschließlich der Anwendung von Z-Index und -webkit-transform versucht: translateZ (0) -Regeln auf das Karussell mit keinem Erfolg.

Dieses Problem scheint in Firefox oder Edge nicht zu existieren oder ist zumindest nicht so offensichtlich.

Irgendwelche Ideen?

Answer 1

Dieses Problem besteht nur in Chrome. Das Problem scheint zu sein, dass WebKit manchmal nicht gut mit Layering umgehen kann.

Hier ist die Lösung, die perfekt für mich gearbeitet: 1) Wrap owl-carousel Klasse mit einem 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) fügen Sie den folgenden CSS:

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

Mir ist klar machen, dass ich Ich habe diese Frage schon einmal gepostet und eine Antwort angenommen, die scheinbar funktioniert hat, aber später wurde mir klar, dass sie meine Navigationsleiste kaputt gemacht hat. Die obige Lösung wird das Flimmerproblem beseitigen und die topbar voll funktionsfähig halten.