React-virtualized: ScrollSync lag canvas hack no longer working in latest Chrome

[oldo]

Up until recently I was successfully using the <canvas /> hack (https://github.com/bvaughn/react-virtualized/issues/291#issuecomment-234933425) to avoid ScrollSync lag when layering and synchronising multiple Grid components.

Now with the latest release of Chrome (v61.0.3163.100) I am finding the this is no longer working. You can see in the following gif that mousewheel scroll is laggy but dragging the scrollbar results in smooth animation.

I know there was plenty of discussion about different methods for avoiding this lag in the past but I'm just wondering if there is anything else that I can try to avoid this lag? It basically renders the app unviable for production use.

Thanks :-)

[dmitriy-kudelko]

The same issue with MultiGrid component (which is basically a set of Grids). Although the canvas hack seems to be still working for me in Chrome, it doesn't work in Safari, which makes it not really helpful.

[bvaughn]

I don't think I can support this hack, to be honest. Especially not if it breaks between browser versions.

[oldo]

Fair enough @bvaughn - I would much prefer something more robust that works across all major browsers.

I'm just wondering whether there have been any developments in regards to avoiding this lag by other means?

[bvaughn]

You're welcome to investigate this and submit a PR if you'd like. :smile: I don't have the time or energy at the moment to keep up with issues like this unfortunately.

[oldo]

Thanks @bvaughn. Yep, understandable that you are busy. If I have a breakthrough I will definitely submit a PR :-)

[dmitriy-kudelko]

Hi @bvaughn , thanks for quick replies.
Indeed you can't support this hack, because it's not event a part of the library I guess ) It's just a hack which accidentally disables threaded scrolling (btw the same effect can be achieved if to disable "Threaded scrolling" flag in chrome://flags).

But I saw that you mentioned a few times that there were some other ways to make scrolling happen in the main UI thread other than using this canvas hack - like attaching mousewheel event somewhere to DOM. I tried to do something similar but didn't succeed.
Could you maybe please provide some more detailed example of how exactly this can be done? Of course if you're aware of it.
I think this could be helpful for many people using the library including myself and the issue reporter.
Thanks!

[bvaughn]

Seems like the workarounds I mentioned earlier no longer work then. Unfortunately I don't have any further ideas at this point.

[symbyte]

If any that is experiencing this happens to be working with an electron app, you can disable threaded scrolling by having the following in your main electron entrypoint (as early in the file as possible)

app.commandLine.appendSwitch('disable-threaded-scrolling', '1');

as a workaround for now.