[AppBar] has a block-like display in Microsoft Edge

[jbbae]

Problem description

So the AppBar component doesn't appear as a single line in Mobile Microsoft Edge browsers. So for instance, if I had a simple AppBar with just a title, the title would appear below the left button instead of right next to it.

Steps to reproduce

Use a Microsoft edge browser in mobile to go to material-ui.com

Versions

• Material-UI: v0.15.0

[jbbae]

To provide more perspective, when I go on to the Material-UI website, the AppBar behaves weirdly, acting as block-like views instead of the single inline view that it's supposed to be. See image attached.

[mfalaize]

I've the same problem with Epiphany browser (webkit rendered), it seems the issue come from the inline-style-prefixer dependency, even with the last version available (2.0.5). The display: flex is not rendered at all for those user-agents.

[mfalaize]

Actually, it seems the display: flex is not rendered when we use arrays in styles objects (i.e. display: ['flex', '-webkit-flex']) and for some unknown user-agents, inline-style-prefixer returns arrays with multiple values for the display attribute.

When we use arrays in styles objects, the corresponding css attribute is not rendered, regardless of the browser we use.

[mfalaize]

There are already some discussions about this issue #705, and React does not want to allow arrays in inline styles : facebook/react#723

[mfalaize]

It seems that returning arrays does not work with React V15 : robinweser/inline-style-prefixer#78 and necolas/react-native-web#131.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.