Extremely slow scrolling with scroll wheel/arrow keys in Firefox

[VictorBlomberg]

When scrolling with the scroll wheel or the arrow keys in Firefox, it does very small increments, meaning I have to do at least four "scrolls" to scroll a single item (row height == 30).

I'm using the demo at https://bvaughn.github.io/react-virtualized/ , both VirtualScroll and FlexTable are affected, and I'm using Windows 7. Both Firefox 42 and Firefox Developer Edition 44 are affected.

[bvaughn]

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!

[bvaughn]

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. :)

[VictorBlomberg]

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

[VictorBlomberg]

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.)

[bvaughn]

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

[VictorBlomberg]

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

[bvaughn]

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. :)

[VictorBlomberg]

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).

[bvaughn]

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.

[VictorBlomberg]

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.

[alexklibisz]

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.

[bvaughn]

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...

[bvaughn]

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.

[alexklibisz]

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.

[alexklibisz]

@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.

[bvaughn]

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.

[alexklibisz]

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

[bvaughn]

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.

[alexklibisz]

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.

[alexklibisz]

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.

[bvaughn]

@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.

[alexklibisz]

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

[VictorBlomberg]

Slow for me too, unfortunately.

[bvaughn]

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)
.

[jamhall]

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! :)

[bvaughn]

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

[Guria]

@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.

[bvaughn]

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. :)

[Guria]

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.

[bvaughn]

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.

[bvaughn]

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.

[bvaughn]

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.

[bvaughn]

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. :)

[bvaughn]

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.

[bvaughn]

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/

[bvaughn]

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

[Guria]

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

[bvaughn]

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)
.

[VictorBlomberg]

@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.

[bvaughn]

:) 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)
.

[rygine]

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

[bvaughn]

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

[nafey]

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.