From 9e47d40fa30836cf5d81dd8523115889cb449673 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 4 Jan 2018 23:56:20 +0200
Subject: [PATCH] fix(progress-bar): animation tearing in Firefox 57 (#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 #7606.
---
 src/lib/progress-bar/progress-bar.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index 1d82aadfb7e3..54e432031a86 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/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,21 +79,29 @@ $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;
     }
@@ -102,6 +109,8 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   &[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;