fix(select): Work around glitch with new list styles in Chrome (#1757)

kfranqueiro · web-flow · commit 4c682672e0ab · 2017-12-13T17:34:04.000-05:00
diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -261,6 +261,15 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
         @include mdc-theme-prop(color, text-primary-on-dark);
       }
     }
+
+    // Styles to override mdc-ripple-radius from mdc-list, which causes display glitches in Chrome
+    // (See https://github.com/material-components/material-components-web/pull/1737#issuecomment-351105800)
+    @include mdc-ripple-radius(50%);
+
+    &::before,
+    &::after {
+      border-radius: 0;
+    }
   }
 
   .mdc-list-group,

Original file line number	Diff line number	Diff line change
`@@ -261,6 +261,15 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin`
`261`	`261`	`@include mdc-theme-prop(color, text-primary-on-dark);`
`262`	`262`	`}`
`263`	`263`	`}`
	`264`	`+`
	`265`	`+ // Styles to override mdc-ripple-radius from mdc-list, which causes display glitches in Chrome`
	`266`	`+ // (See https://github.com/material-components/material-components-web/pull/1737#issuecomment-351105800)`
	`267`	`+ @include mdc-ripple-radius(50%);`
	`268`	`+`
	`269`	`+ &::before,`
	`270`	`+ &::after {`
	`271`	`+ border-radius: 0;`
	`272`	`+ }`
`264`	`273`	`}`
`265`	`274`
`266`	`275`	`.mdc-list-group,`