JQuery SlideUp lässt die ganze Seite in Chrome blättern

Question

Werfen Sie einen Blick auf diese JSFiddle example in Chrome.

Wenn Sie den Code unverändert ausführen, ohne etwas zu scrollen, sollten Sie sehen, dass die Elemente in der grünen Spalte alle 3 Sekunden durchlaufen werden. Der oberste Eintrag wird nach oben verschoben und alle anderen Objekte werden nach oben verschoben. Der Gegenstand erscheint am unteren Ende der Liste. Wenn Sie also lange genug warten, werden Sie sehen, dass er sich zurück bewegt.

So weit, so gut.

Aber jetzt, wenn Sie die "Seite" nach unten scrollen, um mehr Elemente der gelben Spalte zu sehen oder den Text in der roten Spalte zu lesen, sehen Sie, dass jetzt jedes Mal in Element der grünen Spalte, das Ganze Die Seite scrollt ebenfalls zurück, geht langsam wieder nach oben, an diesem Punkt wird wieder normal.

Wenn Sie versuchen, die gleiche Geige in Firefox, werden Sie sehen, dass die Seite ein wenig "schüttelt" für zumindest nicht scrollen und die grüne Spalte korrekt angezeigt wird.

In Edge funktioniert alles einwandfrei wie erwartet.

Irgendeine Idee, wie man dieses merkwürdige Verhalten in Chrome ?? verhindert?

Danke!

Da es scheint, ich brauche, um einen Code enthalten (! Komisch), hier ist der Haupt Radsport Code:

this.$cyclingItem = this.$container.find('div.item').first();  
this.$cyclingItem.slideUp(slideDelay, function() { 
    this.$cyclingItem.hide(); 
    this.$container.append(this.$cyclingItem); 
    this.$cyclingItem.fadeIn(function() { 
    this.$cyclingItem = null; 
    }.bind(this)); 
}.bind(this)); 

Answer 1

Dank Leute an jQuery, ich wurde in der richtigen Richtung. Das Problem wird durch den Scroll-Anker von Chroms verursacht, der fälschlicherweise die erste Spalte meines Beispiels anstelle des mittleren verankert, was in meinem Fall der Hauptinhalt ist.

Ich habe herausgefunden, dass durch Hinzufügen der CSS-Stil Überlauf-Anker: keine; In der ersten Spalte ist das Problem gelöst.