fix(form-field): jumping underline in Edge and Firefox (#8480)

* In Edge and Firefox the underline jumps due to the `transform: perspective`. Also due to the `transform` the underline is getting slightly taller which isn't aligning with the specs.
* Improves rendering of the ripple underline by always setting the 2px height. Since the element only uses `1px` if there are form-field errors the height can be adjusted on errors instead of on every focus/blur.

Fixes #8395

Author: devversion

src/lib/form-field/form-field.scss

@@ -150,8 +150,6 @@ $mat-form-field-default-infix-width: 180px !default;
   position: absolute;
   height: $mat-form-field-underline-height;
   width: 100%;
-  // Prevents underline from disappearing at lower zoom levels.
-  transform: perspective(1px);
 
   .mat-form-field-disabled & {
     background-position: 0;
@@ -160,17 +158,17 @@ $mat-form-field-default-infix-width: 180px !default;
 
   .mat-form-field-ripple {
     position: absolute;
-    height: $mat-form-field-underline-height;
     top: 0;
     left: 0;
     width: 100%;
+    height: $mat-form-field-underline-height * 2;
     transform-origin: 50%;
     transform: scaleX(0.5);
     visibility: hidden;
     transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
 
-    .mat-focused & {
-      height: $mat-form-field-underline-height * 2;
+    .mat-form-field-invalid:not(.mat-focused) & {
+      height: $mat-form-field-underline-height;
     }
 
     .mat-focused &,