From cb0dcb5d218836ab2996e54211d50abdae8d37a2 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 17 Nov 2017 18:13:53 +0100
Subject: [PATCH] fix: blurry ripples for slide-toggle, radio, checkbox in MS
 edge.

Fixes blurry ripples in the slide-toggle, radio and checkbox in Microsoft Edge. The ripples have been blurry because the `border-radius` in an absolute position seems to cause render problems for Edge.

Since the ripples are circular by default, the `border-radius` can be removed and the ripple radius just needs to be set to the value that has been set through CSS before this change. This fixes the blurry ripples in MS Edge and might also improve rendering-stability of the ripples.

Fixes #8392
---
 src/lib/checkbox/checkbox.html         |  5 ++++-
 src/lib/checkbox/checkbox.scss         | 11 +++++------
 src/lib/checkbox/checkbox.ts           |  6 +++++-
 src/lib/radio/radio.html               |  5 ++++-
 src/lib/radio/radio.scss               | 11 +++++------
 src/lib/radio/radio.ts                 |  6 +++++-
 src/lib/slide-toggle/slide-toggle.html |  6 ++++--
 src/lib/slide-toggle/slide-toggle.scss |  1 -
 src/lib/slide-toggle/slide-toggle.ts   |  6 +++++-
 9 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index e706b5c2940f..e1691a3d9955 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -18,7 +18,10 @@
     <div matRipple class="mat-checkbox-ripple"
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
-         [matRippleCentered]="true"></div>
+         [matRippleRadius]="_rippleConfig.radius"
+         [matRippleSpeedFactor]="_rippleConfig.speedFactor"
+         [matRippleCentered]="_rippleConfig.centered">
+    </div>
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">
       <svg version="1.1"
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index c591b1be75fe..1b8cc83a0642 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -9,7 +9,7 @@ $_mat-checkbox-mark-path-length: 22.910259;
 $_mat-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);
 
 // The ripple size of the checkbox
-$_mat-checkbox-ripple-size: 15px;
+$_mat-checkbox-ripple-radius: 25px;
 
 // The amount of spacing between the checkbox and its label.
 $_mat-checkbox-item-spacing: $mat-toggle-padding;
@@ -413,11 +413,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
 .mat-checkbox-ripple {
   position: absolute;
-  left: -$_mat-checkbox-ripple-size;
-  top: -$_mat-checkbox-ripple-size;
-  right: -$_mat-checkbox-ripple-size;
-  bottom: -$_mat-checkbox-ripple-size;
-  border-radius: 50%;
+  left: $mat-checkbox-size / 2 - $_mat-checkbox-ripple-radius;
+  top: $mat-checkbox-size / 2 - $_mat-checkbox-ripple-radius;
+  height: $_mat-checkbox-ripple-radius * 2;
+  width: $_mat_checkbox-ripple-radius * 2;
   z-index: 1;
   pointer-events: none;
 }
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index 2d4b7db7c66b..102547b47def 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -35,6 +35,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -178,6 +179,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   @ViewChild(MatRipple) _ripple: MatRipple;
 
+  /** Ripple configuration for the mouse ripples and focus indicators. */
+  _rippleConfig: RippleConfig = {centered: true, radius: 25, speedFactor: 1.5};
+
   /**
    * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
    * @docs-private
@@ -336,7 +340,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   /** Function is called whenever the focus changes for the input element. */
   private _onInputFocusChange(focusOrigin: FocusOrigin) {
     if (!this._focusRipple && focusOrigin === 'keyboard') {
-      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, centered: true});
+      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
     } else if (!focusOrigin) {
       this._removeFocusRipple();
       this.onTouched();
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index bd68e10b34ff..4c77e164b2a2 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -8,7 +8,10 @@
     <div mat-ripple class="mat-radio-ripple"
          [matRippleTrigger]="label"
          [matRippleDisabled]="_isRippleDisabled()"
-         [matRippleCentered]="true"></div>
+         [matRippleCentered]="_rippleConfig.centered"
+         [matRippleRadius]="_rippleConfig.radius"
+         [matRippleSpeedFactor]="_rippleConfig.speedFactor">
+    </div>
   </div>
 
   <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 9ccd2b679c57..81f350899263 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -3,7 +3,7 @@
 
 
 $mat-radio-size: $mat-toggle-size !default;
-$mat-radio-ripple-size: $mat-radio-size * 0.75;
+$mat-radio-ripple-radius: 25px;
 
 // Top-level host container.
 .mat-radio-button {
@@ -101,11 +101,10 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
 
 .mat-radio-ripple {
   position: absolute;
-  left: -$mat-radio-ripple-size;
-  top: -$mat-radio-ripple-size;
-  right: -$mat-radio-ripple-size;
-  bottom: -$mat-radio-ripple-size;
-  border-radius: 50%;
+  left: $mat-radio-size / 2 - $mat-radio-ripple-radius;
+  top: $mat-radio-size / 2 - $mat-radio-ripple-radius;
+  height: $mat-radio-ripple-radius * 2;
+  width: $mat-radio-ripple-radius * 2;
   z-index: 1;
   pointer-events: none;
 }
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index 2d675060b090..67a0caa703ed 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -39,6 +39,7 @@ import {
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -483,6 +484,9 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
   /** The child ripple instance. */
   @ViewChild(MatRipple) _ripple: MatRipple;
 
+  /** Ripple configuration for the mouse ripples and focus indicators. */
+  _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
+
   /** Reference to the current focus ripple. */
   private _focusRipple: RippleRef | null;
 
@@ -596,7 +600,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
   /** Function is called whenever the focus changes for the input element. */
   private _onInputFocusChange(focusOrigin: FocusOrigin) {
     if (!this._focusRipple && focusOrigin === 'keyboard') {
-      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, centered: true});
+      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
     } else if (!focusOrigin) {
       if (this.radioGroup) {
         this.radioGroup._touch();
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index 14060bd6d693..e1c56ad44cde 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/src/lib/slide-toggle/slide-toggle.html
@@ -24,8 +24,10 @@
 
       <div class="mat-slide-toggle-ripple" mat-ripple
            [matRippleTrigger]="label"
-           [matRippleCentered]="true"
-           [matRippleDisabled]="disableRipple || disabled">
+           [matRippleDisabled]="disableRipple || disabled"
+           [matRippleCentered]="_rippleConfig.centered"
+           [matRippleRadius]="_rippleConfig.radius"
+           [matRippleSpeedFactor]="_rippleConfig.speedFactor">
       </div>
 
     </div>
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 8fd0e11da000..80b714f95b89 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -160,7 +160,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   left: $mat-slide-toggle-thumb-size / 2 - $mat-slide-toggle-ripple-radius;
   height: $mat-slide-toggle-ripple-radius * 2;
   width: $mat-slide-toggle-ripple-radius * 2;
-  border-radius: 50%;
   z-index: 1;
   pointer-events: none;
 }
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 7d0110bbde97..df5c5e3167eb 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -38,6 +38,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -139,6 +140,9 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   /** Reference to the ripple directive on the thumb container. */
   @ViewChild(MatRipple) _ripple: MatRipple;
 
+  /** Ripple configuration for the mouse ripples and focus indicators. */
+  _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
+
   constructor(elementRef: ElementRef,
               renderer: Renderer2,
               private _platform: Platform,
@@ -232,7 +236,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   private _onInputFocusChange(focusOrigin: FocusOrigin) {
     if (!this._focusRipple && focusOrigin === 'keyboard') {
       // For keyboard focus show a persistent ripple as focus indicator.
-      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, centered: true});
+      this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
     } else if (!focusOrigin) {
       this.onTouched();