[FlatButton][ListItem][MenuItem] Wrong design in chrome 47

[ShadowMen]

Problem Description

The following example shows the bug with the FlatButton component.
ListItem and MenuItem have similar problems

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { MuiThemeProvider, getMuiTheme } from 'material-ui/styles';
import FlatButton from 'material-ui/FlatButton';

class App extends Component {
  render() {
    return <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <FlatButton label="Default" />
        <FlatButton label="Primary" primary={true} />
        <FlatButton label="Secondary" secondary={true} />
        <FlatButton label="Disabled" disabled={true} />
      </div>
    </MuiThemeProvider>;
  }
}

ReactDOM.render(<App />, document.getElementById('test'));

Output on Chrome 47

Output on Chrome 50

Versions

• Material-UI: 0.15.0-beta.2
• React: 15.0.1
• Browser: 47.0.2526.80 (64-bit)

[mauvew]

starts from version 0.15.0-beta1, this problem also occurs in chrome 45. Please see the follow pic for reference:

[nathanmarks]

@mbrookes how many prior versions of browsers like chrome are we supporting (officially)? Not to say that we can't fix this anyways, just curious what our official policy is

[nathanmarks]

Figured it out. Object property iteration order is ending up different in setValueForStyles() when touched by a particular script (even though when I iterate over the styles in the createElement it still has the original order preserved).

The result is background gets iterated over after backgroundColor in chrome 48, but not in 49 (both with React 15 + our updated codebase/deps, etc...)

Now, since object property iteration order can't be guaranteed (from what I understand). That means this is definitely something we need to solve when we generate inline styles.

[nathanmarks]

@mbrookes We can take care of this at the source (EnhancedButton) by not passing both background: none AND backgroundColor: 'xxxx'.

[nathanmarks]

@mauvew I just realized that I fixed your issue and it isn't even the @ShadowMen's issue...

[nathanmarks]

For reference, here are the issues related to @ShadowMen's post in older chrome versions I have found that I am fixing:

[nathanmarks]

And this one is in the current version of chrome too... 👎

(i changed the overlay bg to white and text to red, you can see the blue button peeking out from behind)