[BUG] Jumps during scroll by drag

[ivictbor]

1. Cloned repo version": "0.8.1"

2. Added style='max-height: 400px; min-height: 400px; overflow-y: auto' to container

git diff
diff --git a/demo/src/pages/cards.vue b/demo/src/pages/cards.vue
index 863e41c..147ebbe 100644
--- a/demo/src/pages/cards.vue
+++ b/demo/src/pages/cards.vue
@@ -14,6 +14,7 @@
             {{ column.name }}
           </div>
           <Container
+            style='max-height: 400px; min-height: 400px; overflow-y: auto'
             group-name="col"
             @drop="(e) => onCardDrop(column.id, e)"
             @drag-start="(e) => log('drag start', e)"

3. npm run dev

Video with same instructions: https://screencast-o-matic.com/watch/cqli64ULps

[heriisei]

I got myself facing this bug too.

What I found to fix this, is to set the height rule of the .smooth-dnd-container class into like this:

.smooth-dnd-container {
  /* some original rules */

  height: intrinsic;           /* Safari/WebKit uses a non-standard name */
  height: -moz-max-content;    /* Firefox/Gecko */
  height: -webkit-max-content; /* Chrome */
  height: max-content;
}

Because in my case, the default .smooth-dnd-container height is inherited from the parent height, so every item that is rendered below the parent height limit will jump when it got dragged.

Before:

After:

Hope it helps.