fix(radio): Ignore CSS variables in Edge for __background::before

material-components · Sep 29, 2017 · a7e2db4 · a7e2db4
1 parent bf0f722
commit a7e2db4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md
@@ -201,3 +201,9 @@ not return an object.
 
 MDC Radios use the theme's primary color by default for on states, and are completely dark theme
 aware.
+
+### Caveat: Edge and CSS Variables
+
+In browsers that fully support CSS variables, MDC Radio references CSS variables wherever theme properties are used.
+However, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-radio__background::before` will not honor CSS variables in Edge.
+This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
@@ -73,7 +73,7 @@ $mdc-radio-transition-duration: 120ms;
     height: $mdc-radio-ui-pct;
 
     &::before {
-      @include mdc-theme-prop(background-color, primary);
+      @include mdc-theme-prop(background-color, primary, $edgeOptOut: true);
 
       position: absolute;
       top: 0;