Scrolling timeout hover performance issue

In my particular case I use the Table element and I have to set the hovered row index to the component state in order to activate special functionality in my sub-components that are rendered inside of a table row.

The hovered row index is set by using the provided onRowMouseOver prop of the Table component.

When scrolling sometimes the hover event takes several seconds to kick in (up to 2 to 3 seconds(!)) and prevents the table from being able to be hovered during that time span which is horrible for user experience as it can be seen in the following gif (note that I did not slow down, this is realtime)

The issue only occurs in chrome as far as i could test it, other browsers like Edge or Firefox do not have that issue. Another strange behavior of the problem is, that it seems to resolve itself. After a certain amount of time playing around with the table by scrolling and hovering over some rows the hover events behave as they should. When the page is reloaded the issue comes back though.

After research I came to the conclusion that this issue might relate to the issues #564 #322 and maybe #518 but I thought I have to open a new issue as there is no issue that exactly covers my use case.

[gnbaron]

I’m having this same issue on my project that I’m using the Grid component. I need use the isScrolling value to know how my element is rendered, but the scroll callback is having 1.5s ~ 2s of delay to be called.

Like some people already said in this kind of issue, this is happening because the browser is delaying the setTimeout callback on _debounceScrollEnded in exchange of performance reasons.

There are plans to someone work on it ?

I tested an workarround on my project using requestAnimationFrame instead of setTimeout and works fine, but I don’t know if this is the best way to do that. I was thinking in something like this:

// I just wrote it as draft, needs to be tested and refactored
_debounceScrollEnded() {
  const { scrollingResetTimeInterval } = this.props

  if (this._disablePointerEventsTimeoutId) {
    cancelAnimationFrame(this._disablePointerEventsTimeoutId)
    this._scrollDebounceStart = Date.now();
  }

  const delay = function() {
    if (Date.now() - this._scrollDebounceStart >= scrollingResetTimeInterval) {
      this._debounceScrollEndedCallback();
      this._scrollDebounceStart = Date.now();
    } else {
      this._disablePointerEventsTimeoutId = requestAnimationFrame(delay);
    }
  }

  delay.bind(this);

  this._disablePointerEventsTimeoutId = requestAnimationFrame(delay);
  this._scrollDebounceStart = Date.now();
}

[bvaughn]

If overriding the pointer-event style doesn’t resolve the issue you’ve described, then I assume something else is going on in your application (or you’re doing it incorrectly). You could provide a Plnkr, as the new-issue template requests for bug reports:

Are you reporting a bug or runtime error?

Please include either a failing unit test or a Plnkr demonstrating the bug you are reporting. You can start by forking this Plnk! https://plnkr.co/edit/6syKo8cx3RfoO96hXFT1

Your tone sounds a bit aggressive to me. Perhaps I’m interpreting it incorrectly. But please remember that I created this library and support it (by responding to issues like this) in my spare time, for free.

Here’s a Plnkr that shows the workaround working: https://plnkr.co/edit/rzOpcO?p=preview

If it doesn’t work for your application, you’ll need to at least provide a repro case where I can see it not working before I’ll look into it any further.