fix(progress-bar): buffer not rendering correctly on ios (#19346)

Switches to using a 3d transform for the progress bar in order to avoid a rendering issue in `buffer` mode on iOS Safari. Fixes #19328. (cherry picked from commit 4699f30)
angular · Nov 4, 2020 · 4eb5504 · 4eb5504
1 parent 87ccb98
commit 4eb5504
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/material/progress-bar/progress-bar.spec.ts b/src/material/progress-bar/progress-bar.spec.ts
@@ -75,27 +75,27 @@ describe('MatProgressBar', () => {
         const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'))!;
         const progressComponent = progressElement.componentInstance;
 
-        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0)'});
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scale3d(0, 1, 1)'});
         expect(progressComponent._bufferTransform()).toBe(null);
 
         progressComponent.value = 40;
-        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.4)'});
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scale3d(0.4, 1, 1)'});
         expect(progressComponent._bufferTransform()).toBe(null);
 
         progressComponent.value = 35;
         progressComponent.bufferValue = 55;
-        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scale3d(0.35, 1, 1)'});
         expect(progressComponent._bufferTransform()).toBe(null);
 
         progressComponent.mode = 'buffer';
-        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
-        expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.55)'});
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scale3d(0.35, 1, 1)'});
+        expect(progressComponent._bufferTransform()).toEqual({transform: 'scale3d(0.55, 1, 1)'});
 
 
         progressComponent.value = 60;
         progressComponent.bufferValue = 60;
-        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.6)'});
-        expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.6)'});
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scale3d(0.6, 1, 1)'});
+        expect(progressComponent._bufferTransform()).toEqual({transform: 'scale3d(0.6, 1, 1)'});
       });
 
       it('should prefix SVG references with the current path', () => {

diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
@@ -172,8 +172,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
 
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {
+    // We use a 3d transform to work around some rendering issues in iOS Safari. See #19328.
     const scale = this.value / 100;
-    return {transform: `scaleX(${scale})`};
+    return {transform: `scale3d(${scale}, 1, 1)`};
   }
 
   /**
@@ -182,8 +183,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
    */
   _bufferTransform() {
     if (this.mode === 'buffer') {
+      // We use a 3d transform to work around some rendering issues in iOS Safari. See #19328.
       const scale = this.bufferValue / 100;
-      return {transform: `scaleX(${scale})`};
+      return {transform: `scale3d(${scale}, 1, 1)`};
     }
     return null;
   }