Timeline issues with vertical scroll and maxHeight 100%
Hi,
First let me say that I'm really excited that vertical scrolling has been added to the Timeline. I work with a lot of groups and scrolling makes the user experience much better over dragging up and down. I've been playing around with it and have run into a couple of issues.
I'll start off with a couple images and a fiddle:
https://jsfiddle.net/ajuty0t9/2/
In chrome, internet explorer/edge, or firefox, using v4.17.0, with timeline options verticalScroll: true, maxHeight: "100%"
First issue: as soon as the fiddle loads, without scrolling, dragging, or zooming, notice (in Figure 1) that the first item in the group is numbered 100 (Chrome only) and the associated items are misaligned and associated with group ~190 (IE, FF and Chrome). After you start scrolling or dragging, the items jump into place and align correctly. In figure 2 (Chrome only), after scrolling to the middle of the set of groups, notice that group 1 has been moved between group 99 and group 101. It seems that in Chrome, the second item (with index 1) is moved to the middle of the DataSet, and the item in the middle (with index 100) is moved to the front. If I set groupOrder to "id", the ordering of groups is resolved in Chrome but the associated items are still misaligned on initial load for all browsers. If I set orientation: "top", the items are aligned correctly on first render.
Second issue is when you scroll to the bottom of a list of items that exceeds maxHeight 100%, the group border and the border around its associated items do not line up vertically (see Figure 3). if you drag instead of scroll, the group and items line up, but the down arrow on the scrollbar is enabled when you can't drag anymore.
Third and final issue: zooming in or scrolling down a set of groups for the first time, there is a bit of jumping around as the items within a group render and a height is calculated. Once the height has been calculated once, you can scroll back up through the items and there is no jumping around. This may be related to #2287, but it seems to be a more prominent "jump" when using a scrollbar. Issue is same as #2263 (closed), but seems to happen with orientation:"none" also. I've included a gif to demonstrate:
Thanks for reading!