fix(slider): track fill not rendering on ios safari when slider starts at 0

src/material/slider/slider.spec.ts

@@ -107,6 +107,15 @@ describe('MatSlider', () => {
       expect(trackFillElement.style.transform).toContain('scale3d(0.39, 1, 1)');
     });
 
+    it('should hide the fill element at zero percent', () => {
+      expect(trackFillElement.style.display).toBe('none');
+
+      dispatchMousedownEventSequence(sliderNativeElement, 0.39);
+      fixture.detectChanges();
+
+      expect(trackFillElement.style.display).toBeFalsy();
+    });
+
     it('should update the track fill on slide', () => {
       expect(trackFillElement.style.transform).toContain('scale3d(0, 1, 1)');
 

src/material/slider/slider.ts

@@ -374,13 +374,19 @@ export class MatSlider extends _MatSliderMixinBase
 
   /** CSS styles for the track fill element. */
   get _trackFillStyles(): { [key: string]: string } {
+    const percent = this.percent;
     const axis = this.vertical ? 'Y' : 'X';
-    const scale = this.vertical ? `1, ${this.percent}, 1` : `${this.percent}, 1, 1`;
+    const scale = this.vertical ? `1, ${percent}, 1` : `${percent}, 1, 1`;
     const sign = this._shouldInvertMouseCoords() ? '' : '-';
 
     return {
       // scale3d avoids some rendering issues in Chrome. See #12071.
-      transform: `translate${axis}(${sign}${this._thumbGap}px) scale3d(${scale})`
+      transform: `translate${axis}(${sign}${this._thumbGap}px) scale3d(${scale})`,
+      // iOS Safari has a bug where it won't re-render elements which start of as `scale(0)` until
+      // something forces a style recalculation on it. Since we'll end up with `scale(0)` when
+      // the value of the slider is 0, we can easily get into this situation. We force a
+      // recalculation by changing the element's `display` when it goes from 0 to any other value.
+      display: percent === 0 ? 'none' : ''
     };
   }