fix(form-field): legacy ripple underline jumps in edge (#12648)

The ripple underline jumps in Microsoft Edge inside legacy form-fields. Fixes #6351
angular · Aug 21, 2018 · 70d1be8 · 70d1be8
1 parent 65ad6ab
commit 70d1be8
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/lib/form-field/form-field-legacy.scss b/src/lib/form-field/form-field-legacy.scss
@@ -49,6 +49,10 @@ $mat-form-field-legacy-underline-height: 1px !default;
     top: 0;
     height: $height;
 
+    // In some browsers like Microsoft Edge, the `scaleX` transform causes overflow that exceeds
+    // the desired form-field ripple height. See: angular/material2#6351
+    overflow: hidden;
+
     @include cdk-high-contrast {
       height: 0;
       border-top: solid $height;