Scrolling when there are lots Droppables with a shared scroll parent can cause frame rate drops

[Aleksandar-FFWD]

Bug or feature request?

Either a bug or wrong implementation and optimisation on my side.

Expected behavior

Not to drop so many frames.

Actual behavior

Frame rates can drop even to 0 only when the auto-scrolling is going on.

Steps to reproduce

Drag an item far enough so auto-scrolling starts.

What version of React are you using?

^16.4.2

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

^9.0.1

What browser are you using?

Google Chrome

Demo

https://codesandbox.io/s/714jo23n40

[alexreardon]

I cannot seem to interact with the example.. does it work?

[alexreardon]

Oh, the entries are lower

[Aleksandar-FFWD]

Dragable elemnts are more to the bottom. When you try to drag them up or down and the auto scroll initiates. The frames drop so low.

[Aleksandar-FFWD]

The reorderin of the elemnts is not handeled at this point. Im wondering if I can make some improvements doe the frame rates drop when scrolling?

[alexreardon]

Okay, I can see what is going on.

You have a lot of Droppable's which all share a common scroll container. When the scroll changes ALL of the Droppables publish the scroll change because the scroll container is it's parent. In the past we have seen this with 10-20 and it is fine. But with this amount of Droppables we get some serious jank.

A work around for now would be to not use a scroll containers and rely on the body: https://codesandbox.io/s/ml9ljp3yj

I am keen to support your use case as we should support consumers having lots of droppables. This will become a bigger issue as we support nested scroll containers #131.

I think this will need to be fixed as a part of #131 rather than as a stand alone fix.

[alexreardon]

I expect this will be fixed as a part of #131 👍

[Aleksandar-FFWD]

Would be awesome, thanks. Any idea on when it might be resolved? 👍

[alexreardon]

This will be fixed as a part of #131 which is in #974