JQuery SlideUp makes the whole page scroll in Chrome

Question

Take a look at this JSFiddle example in Chrome.

If you run the code as is, without scrolling anything, you should see that the items in the green column as cycling every 3 seconds. The top item slides up to disappear and all other items move up. The item re-appears at the bottom of the list so if you wait long enough, you will see it move back.

So far, so good.

But now if you scroll the "page" down to see more items of the yellow column or to read the text in the red column, you will see that now, every times in item of the green column slides, the whole page scrolls back as well, slowly go back to the top, at which point it goes back to normal.

If you try the same fiddle in Firefox, you will see that the page "shakes" a bit for at least does not scroll and the green column appears correctly.

In Edge, everything works flawlessly as expected.

Any idea how to prevent that strange behaviour in Chrome ??

Thanks !

Since it seems I need to include some code (weird !), here is the main cycling 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

Thanks to people at jQuery, I was pointed in the right direction. The problem is caused by Chroms's scrolling anchor feature which mistakenly anchors the first column of my example instead of the middle one which is, in my case, the main content.

I found out that by adding the CSS style overflow-anchor: none; to the first column, the problem is solved.