-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scrolling when there are lots Droppables with a shared scroll parent can cause frame rate drops #752
Comments
I cannot seem to interact with the example.. does it work? |
Oh, the entries are lower |
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. |
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? |
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. |
I expect this will be fixed as a part of #131 👍 |
Would be awesome, thanks. Any idea on when it might be resolved? 👍 |
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
The text was updated successfully, but these errors were encountered: