fixup! fix(material/core): ripples not fading out on touch devices when scrolling

Backwards compatibility change for g3 tests using just transition: none without the noopanimations module

Author: devversion

src/material/core/ripple/ripple-ref.ts

@@ -47,6 +47,8 @@ export class RippleRef {
     public element: HTMLElement,
     /** Ripple configuration used for the ripple. */
     public config: RippleConfig,
+    /* Whether animations are forcibly disabled for ripples through CSS. */
+    public _animationForciblyDisabledThroughCss = false,
   ) {}
 
   /** Fades out the ripple element. */

src/material/core/ripple/ripple-renderer.ts

@@ -114,7 +114,7 @@ export class RippleRenderer implements EventListenerObject {
     const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
     const offsetX = x - containerRect.left;
     const offsetY = y - containerRect.top;
-    const duration = animationConfig.enterDuration;
+    const enterDuration = animationConfig.enterDuration;
 
     const ripple = document.createElement('div');
     ripple.classList.add('mat-ripple-element');
@@ -130,20 +130,30 @@ export class RippleRenderer implements EventListenerObject {
       ripple.style.backgroundColor = config.color;
     }
 
-    ripple.style.transitionDuration = `${duration}ms`;
+    ripple.style.transitionDuration = `${enterDuration}ms`;
 
     this._containerElement.appendChild(ripple);
 
     // By default the browser does not recalculate the styles of dynamically created
-    // ripple elements. This is critical because then the `scale` would not animate properly.
-    enforceStyleRecalculation(ripple);
+    // ripple elements. This is critical to ensure that the `scale` animates properly.
+    // We enforce a style recalculation by calling `getComputedStyle` and *accessing* a property.
+    // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+    const computedStyles = window.getComputedStyle(ripple);
+    const transitionProperty = computedStyles.transitionProperty;
 
-    // We use a 3d transform here in order to avoid an issue in Safari where
-    // the ripples aren't clipped when inside the shadow DOM (see #24028).
-    ripple.style.transform = 'scale3d(1, 1, 1)';
+    // Note: We detect whether animation is forcibly disabled through CSS by the use
+    // of `transition: none`. This is technically unexpected since animations are
+    // controlled through the animation config, but this exists for backwards compatibility
+    const animationForciblyDisabledThroughCss = transitionProperty === 'none';
 
     // Exposed reference to the ripple that will be returned.
-    const rippleRef = new RippleRef(this, ripple, config);
+    const rippleRef = new RippleRef(this, ripple, config, animationForciblyDisabledThroughCss);
+
+    // Start the enter animation by setting the transform/scale to 100%. The animation will
+    // execute as part of this statement because we forced a style recalculation before.
+    // Note: We use a 3d transform here in order to avoid an issue in Safari where
+    // the ripples aren't clipped when inside the shadow DOM (see #24028).
+    ripple.style.transform = 'scale3d(1, 1, 1)';
 
     rippleRef.state = RippleState.FADING_IN;
 
@@ -156,15 +166,15 @@ export class RippleRenderer implements EventListenerObject {
 
     // Do not register the `transition` event listener if fade-in and fade-out duration
     // are set to zero. The events won't fire anyway and we can save resources here.
-    if (duration || animationConfig.exitDuration) {
+    if (!animationForciblyDisabledThroughCss && (enterDuration || animationConfig.exitDuration)) {
       this._ngZone.runOutsideAngular(() => {
         ripple.addEventListener('transitionend', () => this._finishRippleTransition(rippleRef));
       });
     }
 
     // In case there is no fade-in transition duration, we need to manually call the transition
     // end listener because `transitionend` doesn't fire if there is no transition.
-    if (!duration) {
+    if (animationForciblyDisabledThroughCss || !enterDuration) {
       this._finishRippleTransition(rippleRef);
     }
 
@@ -200,7 +210,7 @@ export class RippleRenderer implements EventListenerObject {
 
     // In case there is no fade-out transition duration, we need to manually call the
     // transition end listener because `transitionend` doesn't fire if there is no transition.
-    if (!animationConfig.exitDuration) {
+    if (rippleRef._animationForciblyDisabledThroughCss || !animationConfig.exitDuration) {
       this._finishRippleTransition(rippleRef);
     }
   }
@@ -371,14 +381,6 @@ export class RippleRenderer implements EventListenerObject {
   }
 }
 
-/** Enforces a style recalculation of a DOM element by computing its styles. */
-function enforceStyleRecalculation(element: HTMLElement) {
-  // Enforce a style recalculation by calling `getComputedStyle` and accessing any property.
-  // Calling `getPropertyValue` is important to let optimizers know that this is not a noop.
-  // See: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-  window.getComputedStyle(element).getPropertyValue('opacity');
-}
-
 /**
  * Returns the distance from the point (x, y) to the furthest corner of a rectangle.
  */

src/material/core/ripple/ripple.spec.ts

@@ -7,7 +7,7 @@ import {
   dispatchMouseEvent,
   dispatchTouchEvent,
 } from '@angular/cdk/testing/private';
-import {Component, ViewChild} from '@angular/core';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {
@@ -43,6 +43,7 @@ describe('MatRipple', () => {
         RippleContainerWithInputBindings,
         RippleContainerWithoutBindings,
         RippleContainerWithNgIf,
+        RippleCssTransitionNone,
       ],
     });
   });
@@ -773,6 +774,21 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
   });
+
+  describe('edge cases', () => {
+    it('should handle forcibly disabled animations through CSS `transition: none`', async () => {
+      fixture = TestBed.createComponent(RippleCssTransitionNone);
+      fixture.detectChanges();
+
+      rippleTarget = fixture.nativeElement.querySelector('.mat-ripple');
+
+      dispatchMouseEvent(rippleTarget, 'mousedown');
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      dispatchMouseEvent(rippleTarget, 'mouseup');
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    });
+  });
 });
 
 @Component({
@@ -822,3 +838,10 @@ class RippleContainerWithNgIf {
   @ViewChild(MatRipple) ripple: MatRipple;
   isDestroyed = false;
 }
+
+@Component({
+  styles: [`* { transition: none !important; }`],
+  template: `<div id="container" matRipple></div>`,
+  encapsulation: ViewEncapsulation.None,
+})
+class RippleCssTransitionNone {}