Timeline: Chrome (Mac/Debian): Stuttering touch/drag of timeline produced by mousewheel usage in another viewsc

[kuehn-sba]

When playing around in Chrome of my Mac with the embedded timeline within our web system, I've noticed that the timeline begins heavily to stutter when previously the mouse wheel was used in any scrollable content.

The problem remains even exist when the URL is reloaded again. The only way to get a "smooth scrolling" of timeline back, is to close Chrome browser or to open a new tab.

You can reproduce it, when:

1. Open: http://visjs.org/examples/timeline/other/performance.html
2. draw 10000
3. Zoom out timeline to the max and touch and drag the timeline a lot to the left (it will scroll smooth all the time)
4. Now resize the browser window to a small size, so that a vertical scrollbar appears
5. Drag the scrollbar to the bottom without using the mouse wheel !!! (only by dragging the scrollbar)
6. Resize the browser window to big size and touch and drag timeline a lot to the left -> (new items will appear and the scrolling of timeline is smooth all the time - no problem at all)
7. Now Resize browser window to a very small window, so that a vertical scrollbar appears again
8. And now use only the mouse wheel to scroll the scrollbar to the bottom
9. Resize the browser window to a big size and touch and drag the timeline a lot to left (now the timeline will start heavily to stutter!!)
10. Reload URL -> zoom out to max-> scroll timeline to left -> it will start to stutter again after touch and drag the timeline

The problem was found when using Chrome on Unix (as ubuntu) and Mac.
That problem has nothing to do with resizing browser view, because stuttering appears in general, when using a mouse wheel for scrolling a scrollable element (e.g. combobox...) before.

I hope you can reproduce and identify the problem.

Maybe it has something to do with Hammer.JS, what you use internal for touching.
I can see inside your source that you use Hammer.JS - v2.0.6 - 2015-12-23.
For testing purpose i had changed to hammer.js 2.0.8 code(replaced lines 11206-13776), but nothing helps (still stuttering).

[kuehn-sba]

my tests so far in vis.js:

line 16847 Range.prototype._onDrag emits rangechange event:

line 17819

   this.on('rangechange', function () {
      if (this.initialDrawDone === true) {

// debug outputs are without stuttering

        this._redraw();
      }
    }.bind(this));

line 18348

Core.prototype._redraw = function () {

 // debug outputs are stuttering in that case of using mousewheel in any other context/content before
...
}

if I analyze the loop of redrawing all components in line 18495, i noticed that stuttering will be produced by repainting Labels when redrawing timeAxis. So If I left out line 23783:

//this._repaintLabels();

stuttering is gone, but not timeaxis labels will be paint. Problem should be inside that function.

[kuehn-sba]

I was exiting the function at several lines and I could noticed:

23861 step.next();  return; 
// will allow smooth scrolling

and

23861 step.next(); 
23862 next = step.getCurrent(); return; 
// will produce stutter

.... produced by moment obj in the while loop?

[kuehn-sba]

Please, can anyone test/confirm that stutter problem? The timeline can hardly be operated by the stuttering...

[JesperJohnsson]

We're currently having the same issue on windows/mac/linux & chrome where when the user scrolls anywhere in the application the timeline starts to stutter. Opening a new tab/window seems to solve the issue until the user scrolls again. But a more permanent solution would be nice :)

[kuehn-sba]

In my case...no problem with win7 chrome. It occurs only when using mousewheel before. Yes, opening a new tab will solve it. Maybe the memory that was used will be flushed for that case

[JesperJohnsson]

Yeah we're having exactly the same problem with the mousewheel and it's exactly as you described the problem in your first post.

[mojoaxel]

@JesperJohnsson Thanks for confirming this issue!! Is there a simple way to reproduce this? The (many) steps in the description are a little hard to follow.
I still don't know what you guys mean with "stutter". Is it a rendering issue or is it a problem with the interaction?

[kuehn-sba]

it will freeze the gui with or without redrawing new items. How i had said, dragging the timeline to left or right starts stuttering. The hammer events for touch and drag are proceeded well without any blocking, but the redrawing process stutters. But why will it be a result of scrolling any content by a mouse wheel (before, everything works fine)

[JesperJohnsson]

The issue doesn't seem to be happening on either safari or edge, it seems to be a problem with chrome. @mojoaxel the easiest way to reproduce the problem is to follow @kuehn-sba instructions :)