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

Author: devversion

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"

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

@@ -35,6 +35,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -194,6 +195,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
   private _controlValueAccessorChangeFn: (value: any) => void = () => {};
 
+  /** Ripple configuration for the mouse ripples and focus indicators. */
+  private _rippleConfig: RippleConfig = {centered: true, radius: 25, speedFactor: 1.5};
+
   /** Reference to the focused state ripple. */
   private _focusRipple: RippleRef | null;
 
@@ -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

@@ -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. */
+  private _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();

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

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

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

@@ -38,6 +38,7 @@ import {
   mixinDisabled,
   mixinDisableRipple,
   mixinTabIndex,
+  RippleConfig,
   RippleRef,
 } from '@angular/material/core';
 
@@ -95,6 +96,9 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
   private _required: boolean = false;
   private _checked: boolean = false;
 
+  /** Ripple configuration for the mouse ripples and focus indicators. */
+  private _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
+
   /** Reference to the focus state ripple. */
   private _focusRipple: RippleRef | null;
 
@@ -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();