Material-components-web: Edge: JS Button problem

[djensen47]

When using/testing mdc-web on the demo site, there seems to be an issue with the js button.

What MDC-Web Version are you using?

0.11.1 via this page:
https://material-components-web.appspot.com/

What browser(s) is this bug affecting?

Microsoft Edge 41.16193.1001.0

What OS are you using?

Windows 10 Build 16193

What are the steps to reproduce the bug?

Open Edge to https://material-components-web.appspot.com/button.html and click on a button that is not CSS only.

What is the expected behavior?

It behaves normally or degrades gracefully to a CSS only button (which appears to be what happens on IE 11)

What is the actual behavior?

[traviskaufman]

Definitely a bug. Thanks for filing.

[finppp]

A similar issue happens with radio buttons and checkboxes when using Edge (Microsoft Edge 40.15063.0.0).
https://material-components-web.appspot.com/radio.html or
https://material-components-web.appspot.com/checkbox.html
Only on the Javascript components

Thanks

[Joeywp]

The same happens with tabs too:

But at the tabs the bounding box for clicks also appears to be too large

Tested on:
Microsoft Edge 40.15063.0.0
Microsoft EdgeHTML 15.15063
Windows Build 15063.296

[lorengreenfield]

Apologies for being non specific. Edge doesn't seem to like material-components-web much at all (yet) - just browsing through the demos at https://material-components-web.appspot.com/ with Edge reveals quite a few issues. I have no doubt that it'll be fixed in time though. I'm really impressed with this library in general and have to say thanks for the work done so far.

[yeelan0319]

Thanks for all the contributions and patience, we have an PR out for this issue #1008.

The bug is caused by Edge's partial support to CSS Variables: there are known issues when apply CSS Variables to pseudo-elements and animations, which in this case it breaks rendering of all ripples that have enabled CSS Variables feature.

PR is about to feature detect Edge and fallback to use a CSS only ripple effect under that circumstance and we will closely monitor when a future version of edge fixes this bug.

[yeelan0319]

After some discussion within #1008 , we decided go with a scoped FD for Edge but rather than banning Edge as whole. The new FD will monitor the actual behavior of how CSS Variable is applied to a pseudo element and if it behave in the above describe way, then we will stop upgrade ripple.

The benefit we get from this method is if users on a future version of Edge that fix the bug, all of our components will start working with ripple while the lower version Edge will still have it fallback to CSS solution.