Edge crashes when clicking form button after filling text field

[jesperkristensen]

Bugs

What MDC Web Version are you using?

I have tested in the latest version (0.30.0) as well as the version we are currently using (0.22.0), and both versions have the issue

What browser(s) is this bug affecting?

Only Edge is affected. It works fine in Chrome, Firefox and IE.

Microsoft Edge 41.16299.15.0
Microsoft EdgeHTML 16.16299

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

1: Follow the first two steps of this guide to create a form: https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md

Here is the one I created from that guide:
https://codepen.io/anon/pen/MQoZRw

2: Open the pen in Edge
3: Type something in one of the of the input fields and then click the button

What is the expected behavior?

No crash

What is the actual behavior?

When clicking the button, Edge freezes for a few seconds, and then the page reloads.

Open Windows Event Viewer, in Windows Logs > Application, this error is logged:

Faulting application name: MicrosoftEdgeCP.exe, version: 11.0.16299.15, time stamp: 0x59cda7cd
Faulting module name: edgehtml.dll, version: 11.0.16299.192, time stamp: 0xf93e5331
Exception code: 0xc0000005
Fault offset: 0x00000000004451a8
Faulting process id: 0x21b0
Faulting application start time: 0x01d3a4a9b92eb23f
Faulting application path: C:\Windows\SystemApps\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\MicrosoftEdgeCP.exe
Faulting module path: C:\WINDOWS\SYSTEM32\edgehtml.dll
Report Id: 6b984911-9984-4e1f-8dea-379e6e5e85b1
Faulting package full name: Microsoft.MicrosoftEdge_41.16299.15.0_neutral__8wekyb3d8bbwe
Faulting package-relative application ID: ContentProcess

Any other information you believe would be useful?

If I remove data-mdc-auto-init="MDCRipple" from the button, the problem does not happen.

[kfranqueiro]

I haven't been able to reproduce the crash, in the same page with the same version of Edge.

Out of curiosity, do either or both of the forms in this codepen cause the crash? (The second uses no MDC JS.)

Also, FYI, you shouldn't be adding mdc-ripple-surface to a button, because mdc-button already has ripple/state styles.

[jesperkristensen]

On https://codepen.io/kfranqueiro/pen/yvPwqg only the first form cause the crash, the second form does not.

I tried it on another computer, where the crash only happened some of the times I tried.

[jesperkristensen]

Here is a more reduced version that also crashes in Edge:
https://codepen.io/anon/pen/ZrvPMB

Same steps: Type something in the text box, then click the button.

When I step throug it in Edge's JavaScript debugger, it crashes at this line:

return instance.root_.style.setProperty(varName, value);

Where varName is "--mdc-ripple-fg-translate-start" and value is something like "1.2970123291015625px, -16.66299819946289px"

[kfranqueiro]

Okay, I was able to get it to happen in this codepen. Maybe the issue I had before was I was submitting without clicking the button, not sure.

Your tracing also helps isolate the cause. This is evidently yet another problem with Edge and CSS custom properties... just when we thought it was finally going to Just Work in Edge 16 😞

[kfranqueiro]

I'm wondering if https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11676012/ might be related, which is reportedly fixed but not yet released. (Though I'm wondering if that status is actually stale given it was updated over half a year ago, so perhaps not...)

[kfranqueiro]

I finally got back to this to do some digging, and it seems like if I remove the rAF that those CSS variables are currently set within and just let the code execute immediately, it doesn't crash. The rAF exists for a reason though, so we need to be careful to pull out just the CSS variable operations.