Jitter when autoscrolling to the end of a list

[tristan-shelton]

Bug or feature request?

Bug report

Expected behavior

Draggables of different sizes should be able to be dropped with autoscroll

Actual behavior

When dropping a larger draggable in a list of smaller ones, there's a pronounced jitter at the end of the list that makes dropping as the last item difficult.

Steps to reproduce

Create two vertical drag drop lists with overflow scroll, one with taller items than the other. Drag a taller item to the bottom of the list of smaller items.

What version of React are you using?

16.3.1

What version of react-beautiful-dnd are you running?

9.0.1

What browser are you using?

Chromium 68
Also appears to happen with Chrome 68, IE11 and Edge 41

Demo

Demo forked from the official demo:
https://codesandbox.io/s/481n1nzvm7

[alexreardon]

Thanks for raising this. I will take a look today

[alexreardon]

I think I have found the cause - and it is messy! In order to fix this I need to do some big refactors. Rather than put this into master, I will target next as it already has a number of improvements in this area.

This should go out in version 10

[alexreardon]

I have created a fix for this 🎉

It is now a part of #719 and will ship with that.

Thanks for raising this @tristan-shelton!!! 👏

This fix should go to production in the next few weeks

[alexreardon]

I still need to update and write new tests but I will do that on #719

[alexreardon]

The space the placeholder makes snaps the list up. But this should be fixed in #77

[tristan-shelton]

Wow, thanks so much for taking care of it so quickly! That one was really giving me headaches trying to implement the library.

Great work!

[GeorgeMarcusGG]

I had a similar issue where this happens on a container with overflow: auto and max-height. It works when the container is scrolling (lots of items), but it doesn't when it's not (few items). This is on [email protected] (but same on [email protected]). My current workaround will probably be setting the overflow manually (either scroll or visible) depending on the number of items. Any better suggestions?

[alexreardon]

Great news, this is fixed in v10. Try using react-beautiful-dnd-next and see if your issue remains

…

On Sat, 3 Nov 2018 at 6:17 am, GeorgeMarcus ***@***.***> wrote: I had a similar issue where this happens on a container with overflow: auto and max-height. It works when the container is scrolling (lots of items), but it doesn't when it's not (few items). This is on ***@***.*** (but same on ***@***.***). My current workaround will probably be setting the overflow manually (either scroll or visible) depending on the number of items. Any better suggestions? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#764 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7fboP5dCgYxMc0jWx68GOJEhrDGMks5urJpAgaJpZM4WOU2R> .

[GeorgeMarcusGG]

I tried it on [email protected] and it doesn't work. This is a similar setup to mine https://codesandbox.io/s/94kmmkv564 (ugly, I know) - gif.

[alexreardon]

Lame! I can try take a look

…

On Sun, 4 Nov 2018 at 11:42 pm, GeorgeMarcus ***@***.***> wrote: I tried it on ***@***.*** and it doesn't work. This is a similar setup to mine https://codesandbox.io/s/94kmmkv564 (ugly, I know) - gif <https://cl.ly/91c1687ff0fc/Screen%252520Recording%2525202018-11-04%252520at%25252002.39%252520PM.gif> . — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#764 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7XIcbIsXCzKev70zld5ZUFRRUHGhks5uruC5gaJpZM4WOU2R> .

[alexreardon]

It should be fixed now on [email protected]

[alexreardon]

https://codesandbox.io/s/9271nvrklp

[GeorgeMarcusGG]

@alexreardon Hey, I don't want to be a pain in the ass, but this doesn't quite seem fixed for me. I adapted your code, so you can see what I mean.

Lots of items - the spacing is fine, but jitter is there: code, gif (the gif does not show the jitter, but it's there)

Few items - spacing not quite the same: code, gif

[arkist]

@GeorgeMarcus It seems because of overflow: 'auto' on your getListStyle.
if you change to overflowY: 'hidden', overflowX: 'auto' instead, jitter will gone.

[alexreardon]

Closed by #838. See version 10 release notes

[JackHull]

This error still remains on the newest react-beautiful-dnd version (13.1.0) and react 17.0.2.
Please reopen.
All the above tips did nothing for me.