[style] Prefixed display is invalid when userAgent is 'all' on the client

[pongsakornsemsuwan]

Problem description

I'm trying out Badge component and run into an 'invalid property value' error for CSS for Badge's display property when userAgent is 'all'

cause : when userAgent is set to 'all', Material UI transforms display:flex into display:-webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex

Steps to reproduce

(1) set userAgent property in muiTheme userAgent: 'all' (2) add a Badge compponent to your site

    <Badge badgeContent={4} primary={true} style={{paddingTop:5}} badgeStyle={{top: 0, right: 15}}>
        <IconButton tooltip="checkout">
            <FontIcon className="material-icons" color={grey500}>shopping_cart</FontIcon>
        </IconButton>
    </Badge>

Versions

• Material-UI: 0.15.4
• React: 15.3.1
• Browser: Chrome Version 52.0.2743.116 m

[oliviertassinari]

If that can help, I'm using the following workaround on my project:

  // Fix an issue with Material-UI and prefixes
  const prepareStyles = muiTheme.prepareStyles;

  muiTheme.prepareStyles = (style) => {
    style = prepareStyles(style);

    if (typeof style.display === 'object') {
      style.display = style.display.join(';display:');
    }

    return style;
  };

[oliviertassinari]

This issue should be addressed once #4066 is done.

[rdewolff]

Having the same issue. Thanks for the tip @oliviertassinari - your prepareStyles hack works.

UPDATE: seems to be working only on full page refresh. When going back in history the display is invalid.

[rdewolff]

Anyone is experiencing the same problem?

[bdart]

We are encountering the problem with the DatePicker on different Android devices where display:flex is replaced and not working anymore.

For us the hack does not work.

[oliviertassinari]

This issue is a known limitation of the inline-style approach. We can not longer prefix for different rendering engines since React v0.15. They changed the style injection method in the DOM. I don't think we will find any solution for the master branch.

4066 has been closed. There is an ongoing migration effort with the next branch.

We are using a new CSS-in-JSS styling solution that addresses this issue. I'm closing it.

[oliviertassinari]

Also, #5931 helps to mitigate the impact of the inline-style solution.