fix(slider): track fill not rendering on ios safari when slide… (#17583)

Fixes the track fill element not being rendered by iOS Safari if the slider starts off at zero. We work around the issue by forcing the element to be recalculated when the value goes from 0 to something else.

Author: crisbeto

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

@@ -373,13 +373,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' : ''
     };
   }