React-virtualized: What version is of IE is required for this project to work?

[3cooper]

Just wanted to know what the minimum required version of IE was. We have a requirement of IE 9. I would like to try this grid in an attempt to move away from FixedDataTable. Thanks.

[bvaughn]

Last time I tested on IE9 (via a VM on modern.ie) I did not notice any obvious problems. Things seemed to work. If you notice an issue in your own testing- feel free to file it or submit a PR.

I don't want to go too far out of my way to support older IE (< 10) but I'm willing to make small tweaks and adjustments. (For instance, I use isNaN instead of Number.isNaN to avoid problems with IE.)

[piecyk]

It looks like newest version drop support for IE9 / IE10 ;/
i will try to debug it later, but from what console says it throws here:

https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js#L223-L225

running the example from https://bvaughn.github.io/react-virtualized/
it throws Object doesn't support property or method '_cellSizeGetter'
at line https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js#L58

[bvaughn]

Hm... that's a strange place to error. Doesn't look browser specific at a glance.

I played around on the react-virtualized demo site in VM on IE 10 just now and everything looks like it works fine. I don't have an IE9 VM downloaded at the moment so I can't spot-check that but... IE10 at least seems to work fine.

[bvaughn]

Just tested with IE9 on Win 7 as well. I do see the error you reported there. So IE9 is affected, but IE10 is not.

[piecyk]

@bvaughn thanks for quick replay, strange for me if i use browser stack windows 7, ie10 i see

and when using emulation ie10 on windows 8.1 the same thing

[piecyk]

and going to Grid tab we will see

[piecyk]

what i was thinking it's a babel transforming problem
basic here is the thread https://phabricator.babeljs.io/T3041
passing this snippet to console added by @mjancarik and everthing works as expected in ie9/ie10

(function() {
    if (!(Object.setPrototypeOf || {}.__proto__)) {
        var nativeGetPrototypeOf = Object.getPrototypeOf;

        Object.getPrototypeOf = function(object) {
            if (object.__proto__) {
                return object.__proto__;
            } else {
                return nativeGetPrototypeOf.call(Object, object);
            }
        }
    }
})();

will find a proper solution tomorrow.
Thanks for awesome work :+1:

[bvaughn]

Ah, great find. Keep me posted on what you come up with! I plan to look at it a little more this evening after my day job too- but things may come up in which case I'd love to have the help. :)

Thank you!

[bvaughn]

The problem seems to be because Babel is using Object.setPrototypeOf which is not supported by IE9 / IE10 although the above polyfill you pasted does seem to patch things up. (Seems like the Babel plugin babel-plugin-transform-proto-to-assign could also be useful.)

Unfortunately IE9 is also going to require a good bit of CSS patching since the default react-virtualized styles rely heavily on flexbox which is also not supported by IE9.

[piecyk]

Lets hope that ie9 will be death soon ( really death ) after Microsoft dropped the support slowly it should fade out...

Thinking about this i will add an section in README about Object.setPrototypeOf if some would like to use it in legacy browser... With css some can play with table-cell or other fall backs etc...
only using VirtualScroll there is not much css needed, thanks for looking on this :+1:

[3cooper]

@piecyk are you saying that you have the flex grid working with IE 9. It is something I was hoping to try soon but I know nothing about flexbox or the work around for it. If you have it working, any advice you could give would be great. Thanks.

[piecyk]

@3cooper sadly no, i'm using only VirtualScroll... For grid i would try to play around table-cell, table-row etc... keep in mind it will not be pretty ( but hey it will be usable )
lets hope that ie9/ie10 will be death soon ....

Maybe over weekend i will have some time and look on this...
You can ask in https://github.com/bvaughn/react-virtualized/issues/147 if some is using it in ie9/ie10

[bvaughn]

Are you talking about FlexTable or Grid @3cooper ? I tried making an alternate CSS stylesheet that used display: table for FlexTable but it doesn't quite work because of the DOM structure. (There is more than just table -> row -> td and that causes columns to not always have consistent widths between rows.) I think I ended up deciding that FlexTable was too inherently coupled to flexbox to be useful to use without flexbox support.

However Grid and VirtualScroll should be usable without flexbox. They're just absolutely-positioned inline-blocks with fixed widths and heights. :)

[bvaughn]

Hey @3cooper and @piecyk, version 7.3.3 addresses the IE10 super issue. Doesn't resolve the flexbox layout issues for IE9 but at least it should simplify IE10 usage.