Columns didn't align properly on iOS 8.4

[lyf1988]

I am developing a web app using react, and planning to support iOS version down to iOS8.
But I found the Columns did't display properly on iOS8, it seems aligned left instead of display like a table.
If iOS 8 safari is out of support list, please just close this.
Thank you all for providing such good looking and easy to use components.

This is the Screen shot from OSX simulator using safari on iPhone 6 Plus - iOS 8.4.

This is same page on iPhone 6 Plus - iOS 9.0

[clauderic]

Issue:

Looks like this is because of the current autoprefixer config being set to last 2 versions.

I went ahead and tested in iOS 8.4 on the simulator and indeed replicated the same behavior on the demo site.

Here's what the generated prefixed CSS currently looks like for Table__row:

Notice it's falling back to display: -webkit-box;, which seems to behave differently on Safari iOS 8 and prior.

If I go ahead and set it to display: -webkit-flex; all is well:

Possible solutions

@bvaughn Happy to submit a small PR for this if you feel like updating the autoprefixer config is the right way to go here.

Alternatively @lyf1988, if you're using a module bundler like webpack, you can always use your own Autoprefixer config in your webpack loader configuration for css files.

[bvaughn]

Good catch @clauderic!

If it's as simple as nudging the autoprefixer config, I'd be happy to accept a PR 😄

[bvaughn]

Fixed with PR #580 (thanks @clauderic!) and will go out soon with 9.0.0

[bvaughn]

PS just pushed another RC (2) with this change if you'd like to test early~ npm i react-virtualized@next