Rendering problems when scrolling fast
See original GitHub issueI have a bug that can be best described by the video: https://youtu.be/tRR0EIifrX4 It happens in Chrome, Mac OS. When a cursor is over a scrollbar (or when I scroll by dragging a slider instead of using trackpad or mouse), there is no problem. But if it somewhere over a list, strange things happening.
ReactList is created like this:
<ReactList itemRenderer={this.renderItem} length={this.state.friends.length} type="uniform" />;
It happens with type="variable"
as well.
Any hint of how to fix it is highly appreciated.
Issue Analytics
- State:
- Created 8 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Scrolling fast causes rendering issues #20821 - GitHub
Whenever I scroll a gatsby site really fast, its like gatsby cant keep up with how fast i am scrolling and i end...
Read more >Strange scrolling/rendering behavior - Microsoft Community Hub
Using the mouse scroll wheel, scroll the page from top to bottom and then back up again very quickly. You should run into...
Read more >slow rendering while scrolling - Google Chrome Community
I'm scrolling via a touchpad if that matters. I see the same behavior when scrolling by grabbing the scroll bar and moving it....
Read more >Troubleshooting rendering performance issues
To improve rendering, navigate to the pages that are rendering slowly. If you're unsure which page(s) this is, try switching to different pages...
Read more >Scroll performance issues with react-virtualized after enabling ...
Scroll performance issues with react-virtualized after enabling APZ ... Instead, it merely render the visible element in table or list container to speed...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Suggested fix is not working for me in recent versions of chrome. So I invented a new one. The idea is that you attach
wheel
listener that cancels the event and updatesscrollLeft
andscrollTop
properties of scrollable div. Example:I just accidentally found a solution! You have to attach
mousewheel
listener to the scrollable element. Just an empty listener. After thatonscroll
events will be fired synchronously.Chrome, you are crazy.