fix: blurry ripples for slide-toggle, radio, checkbox in MS edge. (#8514)

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

Author: devversion

src/lib/checkbox/checkbox.html

@@ -19,7 +19,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"

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;
 }

src/lib/checkbox/checkbox.ts

@@ -34,6 +34,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -177,6 +178,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();

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"

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;
 }

src/lib/radio/radio.ts

@@ -38,6 +38,7 @@ import {
   mixinColor,
   mixinDisabled,
   mixinDisableRipple,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -482,6 +483,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;
 
@@ -595,7 +599,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();

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>

src/lib/slide-toggle/slide-toggle.scss

@@ -161,7 +161,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;
 }

src/lib/slide-toggle/slide-toggle.ts

@@ -37,6 +37,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -138,6 +139,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,
               private _platform: Platform,
               private _focusMonitor: FocusMonitor,
@@ -230,7 +234,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();