React-virtualized: MS Edge Support

[mdekrey]

When testing with MS Edge (38.14393.0.0) on the react-virtualized demo page (https://bvaughn.github.io/react-virtualized/) with a large number of items (100,000), scrolling to the bottom using the scrollbar does not display all elements in this case.

In addition, it looks like sometimes when scolling is done via the mouse wheel, an unexpected amount of distance is scrolled: it can scroll a lot or only a little. (I haven't found the connection for the amount it actually scrolls, but have on occasion seen it flicker, only to appear to have not scrolled.)

[bvaughn]

TBH I've only tested RV in IE 9, 10, and 11. I'll grab a VM from modern.ie with Edge in it and try to take a look at some point.

If you're developing on Windows and can more easily repro this, I'd appreciate any insights or debugging you're able to do (or even a PR). :)

[mdekrey]

I'm actively working on this from my end; if I can track it down precisely, I'll definitely do a PR.

I'm having different behaviors in my own environment versus the demo at the moment, and I'm not sure why, but will be working on it more this week!

[bvaughn]

Much appreciated. 😄

If by your own environment, you mean local, dev-mode (npm start) then keep in mind that some performance differences are expected between React dev and prod.

[bvaughn]

Ah ha! So I just got around to giving this a spin on a Virtual Box VM with Edge and I'm pretty sure the issue is that IE doesn't support a scrollHeight tall enough for 100,000 rows at 50 pixels per row. Looks like Edge is topping out with a scrollTop of ~1.5M pixels (Edit: tested with Edge 38.14393.0.0).

The MS docs mention this behavior without giving a lot of information:

This property's value equals the current vertical offset of the content within the scrollable range. Although you can set this property to any value, if you assign a value less than 0, the property is set to 0. If you assign a value greater than the maximum value, the property is set to the maximum value.

In the past, I've attempted to account for this browser limitation with the ScalingCellSizeAndPositionManager but it seems I didn't pick a value low enough for the often-disappointing IE family. 😏 I've just confirmed that lowering the threshold from 10M to 1.5M fixes the problem for Edge.

I kind of hate doing this but... maybe it's the best option since Edge support is important.

Related issues:

• bvaughn/react-virtualized#193: VirtualScroll fails to render items correctly for over 559239 items
• bvaughn/react-virtualized#304: Imprecise scrollTop value when scrolling
• facebook/fixed-data-table#251: Data table breaks down with large ordinate parameter to translate3d

[bvaughn]

@mdekrey: Just published version 7.21.1 with the lowered threshold. 100,000 rows looks fine for me in Edge (in a VM). Give it a spin on the demo site and let me know if it's working better for you too.

Going to close this issue for now because I _think_ it's behavior well. Please let me know if there are additional issues though and I can re-open it. 😄