JQuery SlideUp fait défiler toute la page dans Chrome

Question

Jetez un oeil à ce JSFiddle example dans Chrome.

Si vous exécutez le code tel quel, sans faire défiler quoi que ce soit, vous devriez voir que les éléments de la colonne verte cyclent toutes les 3 secondes. L'élément supérieur glisse vers le haut pour disparaître et tous les autres éléments se déplacent vers le haut. L'élément réapparaît au bas de la liste, donc si vous attendez assez longtemps, vous le verrez revenir en arrière.

Jusqu'ici, tout va bien. Mais maintenant, si vous faites défiler la "page" vers le bas pour voir plus d'éléments de la colonne jaune ou pour lire le texte dans la colonne rouge, vous verrez que maintenant, chaque fois dans l'élément de la colonne verte glisse, l'ensemble la page remonte également, revenez lentement vers le haut, à quel point elle revient à la normale.

Si vous essayez le même violon dans Firefox, vous verrez que la page "secoue" un peu pour au moins ne défile pas et la colonne verte apparaît correctement.

Dans Edge, tout fonctionne parfaitement comme prévu.

Une idée de comment empêcher ce comportement étrange dans Chrome ??

Merci!

Comme il semble que je dois inclure un code (! Bizarre), voici le code principal cycliste:

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

Merci aux personnes à jQuery, je fait remarquer dans la bonne direction. Le problème est causé par la fonction d'ancrage défilant de Chroms qui ancre par erreur la première colonne de mon exemple au lieu de celle du milieu qui est, dans mon cas, le contenu principal.

J'ai découvert qu'en ajoutant le style CSS overflow-anchor: none; à la première colonne, le problème est résolu.