fix(progress-bar): animation tearing in Firefox 57 (angular#9123)

Works around an issue in Firefox 57 and above where the animated elements in the progress bar start leaving trails as they animate.

Fixes angular#7606.

Author: crisbeto

src/lib/progress-bar/progress-bar.scss

@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
 
 $mat-progress-bar-height: 5px !default;
 $mat-progress-bar-full-animation-duration: 2000ms !default;
@@ -11,8 +12,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   height: $mat-progress-bar-height;
   overflow: hidden;
   position: relative;
-  // translateZ is added to force the mat-progress-bar into its own GPU layer.
-  transform: translateZ(0);
   transition: opacity $mat-progress-bar-piece-animation-duration linear;
   width: 100%;
 
@@ -80,28 +79,38 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
       transition: none;
     }
     .mat-progress-bar-primary {
+      // Avoids stacked animation tearing in Firefox >= 57.
+      @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
       left: -145.166611%;
     }
     .mat-progress-bar-primary.mat-progress-bar-fill::after {
+      // Avoids stacked animation tearing in Firefox >= 57.
+      @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
     }
     .mat-progress-bar-secondary {
+      // Avoids stacked animation tearing in Firefox >= 57.
+      @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
       left: -54.888891%;
       display: block;
     }
     .mat-progress-bar-secondary.mat-progress-bar-fill::after {
+      // Avoids stacked animation tearing in Firefox >= 57.
+      @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
     }
   }
 
   &[mode='buffer'] {
     .mat-progress-bar-background {
+      // Avoids stacked animation tearing in Firefox >= 57.
+      @include backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;
       display: block;