Extremely slow scrolling with scroll wheel/arrow keys in Firefox about react-virtualized HOT 43 CLOSED

I've yet to dig a bit deeper into the source code, but when I disabled smooth scrolling in Firefox, the issue disappeared. (Smooth scrolling seems to be enabled by default in Firefox, at least on Windows.)

from react-virtualized.

Interesting. I'm sorry to hear that.

Track-pad scrolling on Firefox (on my Mac) is the same as Chrome for me, but I see what you're referring to with the arrow keys. I'll take a look!

from react-virtualized.

I've addressed the key-press scrolling issue but I'm not sure how to approach the scroll wheel issue since I don't have a Windows box to reproduce it on. I'll see if I can find one. :)

from react-virtualized.

I'll see if I can assist there, once back to a desktop.

from react-virtualized.

Interesting! Hm. That's an area I don't know much about.

from react-virtualized.

Yeah, me neither. Hopefully I'll be able to spend some time on it tomorrow, if you don't beat me to it.

from react-virtualized.

For what it's worth, I checked this out on Browser Stack today (my best option at the moment). I tried Windows 7 and Windows 8 and Firefox 42 and 43. Scrolling with the scroll-wheel is kind of slow (especially compared to Chrome) but I don't think I'm seeing what you're describing ("extremely slow").

I did see it scrolling extremely slowly with arrow keys before I committed 96ab0bf. Maybe this means it resolved things? Eh... let me know. :)

from react-virtualized.

The issue (using scroll wheel) seems to persist on both Firefox 42 and Firefox 44 (at least on the machines I've tested), but it works fine in latest Nightly (45) on my machine.

Tried to get the project running locally, but something failed during npm install, will try again later and see if I can find out the issue. I'll anyway be interesting to see if it still works once 45 hits Firefox Developer Edition (in a few weeks I believe).

from react-virtualized.

Thanks for the update, Victor. Hm. I'll have to check this out when I get access to a Windows box since it's a little hard to test on Browser Stack with the latency that introduces.

from react-virtualized.

Heh, no, I understand that, I like BrowserStack ... but not for these kind of things (I didn't even get the scroll wheel working yesterday when I tried -- made it even harder). I'll dig a bit more next week and see if I can get the dev environment running.

from react-virtualized.

I am having the same issue with FF 43 on Ubuntu. Any general ideas for the potential cause behind this? I would be willing to look into it but just started using this lib today.

from react-virtualized.

No ideas to be honest. Would welcome any info you could provide- by which I mean... Is the scrolling slow because of a performance issue? Or...

from react-virtualized.

I've found a way to reproduce it :)

Help would still be welcome, but I can also take a look myself over the weekend. It doesn't seem to be performance-related. At a glance it seems to be an issue with scroll event deltas.

from react-virtualized.

For me (FF 43 Ubuntu), even the demo page (http://bvaughn.github.io/react-virtualized/) is showing the problem. Also tested on Firefox for Android and it isn't an issue there. Would be terrific if you can get a fix on this.

I will look at the source now to get better oriented. So far this is the most complete library I've found for a current chat feature I'm working on.

from react-virtualized.

@bvaughn So this is a very primitive metric, but maybe a start:

I added a simple console.log('row height') within the _getRowHeight(index) function. Using the default demo, I just wanted to see how many times it would be called when doing a mouse scroll scroll down one full row (i.e. make "Peter Brimer" disappear). In FF it was called 378 times. In Chrome it was called 24 times. However, if you click the scroll bar and pull it down a full item, it is also only called 24 times in FF.

I did the same thing for the _onScroll function. FF called it 95 times, Chrome called it twice.

I'll do some more refined profiling and reading about the differences between the two browsers in terms of how they trigger onscroll events for a div.

from react-virtualized.

This is good info, @alexklibisz.

My fiancée worked on a similar issue for Google Maps scrolling and I spoke to her about it this morning. She thought she recalled Firefox doing something special to reduce the delta before dispatching scrolling events (potentially due to problems with elastic scrolling and devices like Magic mouse).

If it does turn out to be that... I'm not sure how much react-virtualized can (or should) do to "fix" it.

from react-virtualized.

@bvaughn Sorry, but what do you mean by delta in this context? Just so we're on the same page

from react-virtualized.

The amount of change in the vertical/horizontal scroll position triggered by a mouse-wheel scroll.

React virtualized is just responding to the updated scrollTop.

from react-virtualized.

Ok got it.

That led me to look at the _onWheel function. These are the sequences for a single wheel "tick" of my standard usb mouse:

FF sequence goes:

_onWheel
_onScroll
render
_onScroll
render

Chrome sequence goes:

_onWheel
_onScroll
render
render

Maybe noteworthy that onScroll is getting called twice as often for FF than Chrome. I'll probably look another 15 min before moving onto something else for a few hrs.

from react-virtualized.

Unfortunately I have to move on to something else now. For reference, I did also try to use lodash throttle functions on the _onScroll methods:

this._onScroll = this._onScroll.bind(this)
this._onScroll = _.throttle(this._onScroll, 100)

I was able to tweak the number to have some noticable changes in scrolling, but nothing that actually worked well.

I'll keep following and pitch in where I can.

from react-virtualized.

@VictorBlomberg, @alexklibisz: Release 4.1.0 may have positively improved this mouse-wheel scrolling in Firefox. Give it a shot on the demo page? I just tried it in Browser Stack and it seems to have been improved but... it's a little hard to tell.

from react-virtualized.

@bvaughn Still slow for me unfortunately, FF 43 on ubuntu.

from react-virtualized.

Slow for me too, unfortunately.

from react-virtualized.

Rats. Okay well thanks for reporting back so quickly :)

At least mobile is faster now. FF is next... :)

On Sunday, January 17, 2016, Victor Blomberg [email protected]
wrote:

Slow for me too, unfortunately.

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

from react-virtualized.

I can also confirm this is an issue on FF 42.0 on Ubuntu 15.10. These guys had the same problem. Keep up the good work @bvaughn! :)

from react-virtualized.

Thanks for the pointer to cubiq/iscroll/issues/577. That looks like it may be very helpful.

from react-virtualized.

@bvaughn You have created really great components with good api. But this bug serious stopper from using it in public production. Hope solution will be found soon, because I plan to create own components on top of yours.

from react-virtualized.

Hi @Guria,

Unfortunately this bug isn't specific to react-virtualized (see emberjs/list-view/issues/91 and cubiq/iscroll/issues/577 for example). Also note that Facebook's own fixed-data-table demonstrates this problem as well.

A strategy mentioned in one of those discussion threads is to manipulate the deltas like so:

if ( 'deltaX' in e ) {
    var multiply = e.deltaMode === 1 ? this.options.mouseWheelSpeed : 1;
    wheelDeltaX = -e.deltaX * multiply;
    wheelDeltaY = -e.deltaY * multiply;
} 

I'm not sure how well this strategy works (if it negatively impacts other browsers). Beyond that, react-virtualized isn't responding to scroll-event deltas. It's reacting to scroll events by querying the scrollTop property of the scroll-container. And for mouse-wheel scrolling in Firefox, that property is just updating very slowly.

I've read that the scrolling issue may be caused by Firefox's "smooth scrolling" option (found in Options > Advanced > General) which... if so... is something I'm very reluctant to try and work-around in the front-end.

tl;dr I don't know a good way to counter it without negatively impacting scrolling for non-Firefox, non-mouse-wheel use cases. I'd welcome help from others if anyone has great ideas for how to address this but... I don't have any active strategy for how to tackle it at the moment. :)

from react-virtualized.

Is there a way to make it library consumer responsible to detect firefox+mouse env and override react-virtualized behaviour based on that?
BTW, just checked Facebook's fixed-data-table and it scrolls pretty well in Firefox.

from react-virtualized.

When I last checked it (2-3 weeks ago) on Windows with a mouse-wheel (something I don't have at the moment, given that I'm at work on a Mac laptop) it had the same slow-scrolling issue. That being said... you could try a similar approach as I described here on issue #102:

1. Manually set overflow to hidden to prevent inner scrolling.
2. Listens to scroll and wheel events yourself, massage them as necessary, and then pass them through to the component's setScrollTop or setScrollPosition method.

In concept, I think this should work. And if it worked well it would make a good high-order component addition to react-virtualized. Maybe call it something like CustomScroll or something. :D

This approach might also work well for issues like #92 so ping @x4080.

from react-virtualized.

Experimented a bit with this tonight. Adding a custom wheel handler is pretty straight forward but preventing "duplicate" wheel and scroll events seems much harder. For example, a quick trackpad swipe dispatches the following events: scroll, wheel, [...], scroll, scroll

Given that the scroll event is fired before and after the wheel event how can we ensure that only one is handled?

Responding to both is definitely not good because it leads to the "stutter" in certain browsers as reported on issue #87.

from react-virtualized.

Talked about this a bit with James Long today and it seems likely that the upcoming Firefox 46 release will resolve the slow-scrolling issue. It also seems like that there isn't much react-virtualized can do in the meanwhile to work around this (my interpretation). So I'm going to leave this issue open for tracking purposes and hopefully we'll make it as fixed once FF 46 has been released.

from react-virtualized.

PR #110 (issues/2 branch) has a a potential, positive impact on this issue. Posting in case anyone would like to verify.

Edit: Disregard. Seems like scroll-behavior: smooth; breaks trad-pad scrolling. :)

from react-virtualized.

Markus Stang reported that removing the lines that set scrollLeft/scrollTop in componentDidUpdate resolves the wheel issue for Firefox. I have confirmed this in my own testing. Unfortunately this breaks a few other pieces of functionality (eg. the scrollToRow and scrollToColumn properties and the setScrollPosition method). I need to put more thought into this. I'm sure there's a way to support both use-cases.

from react-virtualized.

I think I may have just found a work-around that isn't too hacky. Updated PR #110 with it. If anyone is interested in giving it a spin- I pushed it out to NPM as 5.1.2-rc1

It's also currently visible here ~ https://bvaughn.github.io/react-virtualized/

from react-virtualized.

FYI @VictorBlomberg, @alexklibisz, @jamhall, and @Guria. Version 5.2.1 was just released. Should fix this issue. Thanks for your help.

from react-virtualized.

@bvaughn just tested it. Seems completely fixed. Great work

from react-virtualized.

Woo hoo! Thank YOU for taking the time to confirm. :)

On Monday, February 22, 2016, Aleksey Guryanov [email protected]
wrote:

@bvaughn https://github.com/bvaughn just tested it. Seems completely
fixed. Great work

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

from react-virtualized.

@bvaughn: Yep, works really great for me too. Both arrow keys and scroll wheel. Thank you for solving this issue! And thank you for an astonishing set of components.

from react-virtualized.

:) Thanks Victor!

On Monday, February 22, 2016, Victor Blomberg [email protected]
wrote:

@bvaughn https://github.com/bvaughn: Yep, works really great for me
too. Both arrow keys and scroll wheel. Thank you for solving this issue!
And thank you for an astonishing set of components.

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

from react-virtualized.

FWIW, i'm still seeing this in Firefox 50 on mac 10.11.6 with a somewhat busy table. i'm seeing it here as well: https://bvaughn.github.io/react-virtualized/#/components/MultiGrid

from react-virtualized.

Scrolling's fast for me in FF 50 on Mac OS 10.12

from react-virtualized.

Hi I noticed the slow scroll on react-virtualized table on my project.
I am running on Windows 11 Beta on Chrome 94.0.4606.61. Setting the smooth scroll flag on chrome (chrome://flags/#smooth-scrolling) to disabled made it go away. Thought I had leave a comment here for others who experience the same issue.

It would be good to have a fix in the library though as Windows 11 nears release.

from react-virtualized.