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

Support transition-duration

Author: devversion

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

@@ -139,12 +139,19 @@ export class RippleRenderer implements EventListenerObject {
     // 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;
-
-    // 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';
+    const userTransitionProperty = computedStyles.transitionProperty;
+    const userTransitionDuration = computedStyles.transitionDuration;
+
+    // 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. This logic does
+    // not need to be super accurate since it covers some edge cases which can be easily avoided by users.
+    const animationForciblyDisabledThroughCss =
+      userTransitionProperty === 'none' ||
+      // Note: The canonical unit for serialized CSS `<time>` properties is seconds. Additionally
+      // some browsers expand the duration for every property (in our case `opacity` and `transform`).
+      userTransitionDuration === '0s' ||
+      userTransitionDuration === '0s, 0s';
 
     // Exposed reference to the ripple that will be returned.
     const rippleRef = new RippleRef(this, ripple, config, animationForciblyDisabledThroughCss);

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

@@ -44,6 +44,7 @@ describe('MatRipple', () => {
         RippleContainerWithoutBindings,
         RippleContainerWithNgIf,
         RippleCssTransitionNone,
+        RippleCssTransitionDurationZero,
       ],
     });
   });
@@ -788,6 +789,19 @@ describe('MatRipple', () => {
       dispatchMouseEvent(rippleTarget, 'mouseup');
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
+
+    it('should handle forcibly disabled animations through CSS `transition-duration: 0ms`', async () => {
+      fixture = TestBed.createComponent(RippleCssTransitionDurationZero);
+      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);
+    });
   });
 });
 
@@ -845,3 +859,10 @@ class RippleContainerWithNgIf {
   encapsulation: ViewEncapsulation.None,
 })
 class RippleCssTransitionNone {}
+
+@Component({
+  styles: [`* { transition-duration: 0ms !important; }`],
+  template: `<div id="container" matRipple></div>`,
+  encapsulation: ViewEncapsulation.None,
+})
+class RippleCssTransitionDurationZero {}

tools/public_api_guard/material/core.md

@@ -516,7 +516,9 @@ export class RippleRef {
         fadeOutRipple(ref: RippleRef): void;
     },
     element: HTMLElement,
-    config: RippleConfig);
+    config: RippleConfig, _animationForciblyDisabledThroughCss?: boolean);
+    // (undocumented)
+    _animationForciblyDisabledThroughCss: boolean;
     config: RippleConfig;
     element: HTMLElement;
     fadeOut(): void;