use filter/backface-visibility to address label jumpiness

Author: mmalerba

src/lib/form-field/_form-field-legacy-theme.scss

@@ -30,7 +30,7 @@
 $mat-form-field-legacy-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
-@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+@mixin _mat-form-field-legacy-label-floating($font-scale, $infix-padding, $infix-margin-top) {
   // We use perspective to fix the text blurriness as described here:
   // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
   // This results in a small jitter after the label floats on Firefox, which the
@@ -83,21 +83,21 @@ $mat-form-field-legacy-dedupe: 0;
     &.mat-form-field-can-float {
       &.mat-form-field-should-float .mat-form-field-label,
       .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
-        @include _mat-form-field-label-floating(
+        @include _mat-form-field-legacy-label-floating(
                 $subscript-font-scale, $infix-padding, $infix-margin-top);
       }
 
       .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
       .mat-form-field-label {
-        @include _mat-form-field-label-floating(
+        @include _mat-form-field-legacy-label-floating(
                 $subscript-font-scale, $infix-padding, $infix-margin-top);
       }
 
       // Server-side rendered matInput with a label attribute but label not shown
       // (used as a pure CSS stand-in for mat-form-field-should-float).
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
       .mat-form-field-label {
-        @include _mat-form-field-label-floating(
+        @include _mat-form-field-legacy-label-floating(
                 $subscript-font-scale, $infix-padding, $infix-margin-top);
       }
     }

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

@@ -105,19 +105,13 @@ $mat-form-field-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
 @mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  // We use perspective to fix the text blurriness as described here:
-  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
-  // This results in a small jitter after the label floats on Firefox, which the
-  // translateZ fixes.
-  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
-             translateZ(0.001px + $mat-form-field-dedupe);
-  // The tricks above used to smooth out the animation on chrome and firefox actually make things
-  // worse on IE, so we don't include them in the IE version.
-  -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
-                 scale($font-scale);
-
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
+             scale($font-scale);
   width: 100% / $font-scale + $mat-form-field-dedupe;
 
+  // Prevent text bluriness when label is floating.
+  backface-visibility: initial;
+
   $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;
 }
 

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

@@ -2,7 +2,7 @@
 @import '../core/style/vendor-prefixes';
 
 
-// Styles that only apply to the standard variant of the form-field.
+// Styles that only apply to the box variant of the form-field.
 
 // The border radius for the form field box.
 $mat-form-field-box-border-radius: 4px !default;
@@ -28,9 +28,7 @@ $mat-form-field-box-subscript-padding:
   }
 
   .mat-form-field-label {
-    // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
-    transform: translateY(-50%) perspective(100px);
-    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
   }
 
   .mat-form-field-underline {

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

@@ -9,6 +9,17 @@ $mat-form-field-legacy-underline-height: 1px !default;
 
 
 .mat-form-field-variant-legacy {
+  .mat-form-field-label-wrapper {
+    filter: initial;
+  }
+
+  .mat-form-field-label {
+    backface-visibility: initial;
+
+    transform: perspective(100px);
+    -ms-transform: none;
+  }
+
   // The underline is what's shown under the control, its prefix and its suffix.
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {

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

@@ -78,6 +78,9 @@ $mat-form-field-default-infix-width: 180px !default;
   height: 100%;
   overflow: hidden;
   pointer-events: none;  // We shouldn't catch mouse events (let them through).
+
+  // Helps prevent text jumpiness when transforming the label.
+  filter: blur(0);
 }
 
 // The label itself. This is invisible unless it is. The logic to show it is
@@ -97,10 +100,6 @@ $mat-form-field-default-infix-width: 180px !default;
   text-overflow: ellipsis;
   overflow: hidden;
 
-  // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
-  transform: perspective(100px);
-  -ms-transform: none;
-
   transform-origin: 0 0;
   transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
   color $swift-ease-out-duration $swift-ease-out-timing-function,
@@ -109,6 +108,9 @@ $mat-form-field-default-infix-width: 180px !default;
   // Hide the label initially, and only show it when it's floating or the control is empty.
   display: none;
 
+  // Helps prevent text jumpiness when transforming the label.
+  backface-visibility: hidden;
+
   [dir='rtl'] & {
     transform-origin: 100% 0;
     left: auto;