mdc-button in Edge browser is colorless

[ghost]

Renders properly in Chrome and FF

[touficbatache]

Hey, thanks for filing an issue. But please consider using the provided template to submit bugs / issues as it makes it more clear what the issue is, which browser is it affecting, which OS you're using, etc... so it can be tested and fixed as soon as possible.

[acdvorak]

Definitely looks like a bug. I was able to repro it on our button demo page in Edge 15.

It's not just dark mode, either: all --raised buttons seem to lack any background color at all in Edge.

As @touficbatache suggested, in the future, please try to use the provided issue template and attach a CodePen (or in this case, a link to the public demo page). It will help us get to the bottom of the issue faster.

Thanks!

[RobJacobs]

@acdvorak I think this has to do with when the global css variables are set/imported. On the demo page, I used the dev tools to look at the 'Buttons - RAISED WITH PRIMARY' element - the computed tab revealed:

For the background-color property, notice the .mdc-button--primary.mdc-button--raised: var(---mdc-theme-primary, #212121) from the assests/demo-styles.css.js is being overruled by the .mdc-button: transparent rule from the assets/material-components-web.css.js.

Odly enough, simply unchecking the top level background-color checkbox will cause the rule to evaluate correctly. Rechecking will then apply the rules:

Same applies to the button color rule.

[yeelan0319]

@RobJacobs , thanks for the help! I found the same issue as you do where the more specific rule get override by generic rule, but this only happen to the latest version of Edge (15).

@acdvorak @Loggan08: This seems to be a Edge 15 only bug because its wrong implementation of pseudo element style. I will try to lock down this further.

[RobJacobs]

@yeelan0319 @acdvorak I was hoping PR #1113 would fix the problem, but no luck.

[kfranqueiro]

I've done some more investigation on this, and it seems like probably another issue with Edge, CSS variables, and pseudo-elements - but in this case, the CSS variable that trips it is applied to the root element, not the pseudo-elements.

I've been looking at FAB which has a similar issue (it uses secondary for its background), and if I switch its background-color to use a color literal rather than a CSS variable, the color renders correctly. (Alternatively, if I remove the ripple styles that apply background-colors to the pseudo-elements, the issue also goes away; interestingly, those values don't even reference CSS variables in the particular case I'm looking at.)

I suspect this may boil down to us needing to exclude at least some usages of CSS variables from Edge until they sort out their own browser. This unfortunately still happens even on Edge 16 in the modern.ie Win10 preview VM. My biggest concern in working around this is how much CSS I'll end up needing to add, which would affect load times in all browsers.

[kfranqueiro]

This was fixed via #1364 which was merged manually.