fix(ripple): use element coordinates instead of page coordinates (#7446)

Fixes #7436.

Author: crisbeto

src/lib/core/ripple/index.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {ScrollDispatchModule, VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling';
+import {ScrollDispatchModule} from '@angular/cdk/scrolling';
 import {PlatformModule} from '@angular/cdk/platform';
 import {MatCommonModule} from '../common-behaviors/common-module';
 import {MatRipple} from './ripple';
@@ -20,6 +20,5 @@ export {RippleConfig, RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '.
   imports: [MatCommonModule, PlatformModule, ScrollDispatchModule],
   exports: [MatRipple, MatCommonModule],
   declarations: [MatRipple],
-  providers: [VIEWPORT_RULER_PROVIDER],
 })
 export class MatRippleModule {}

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

@@ -8,7 +8,6 @@
 
 import {ElementRef, NgZone} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
-import {ViewportRuler} from '@angular/cdk/scrolling';
 import {RippleRef, RippleState} from './ripple-ref';
 
 
@@ -56,11 +55,7 @@ export class RippleRenderer {
   /** Whether mouse ripples should be created or not. */
   rippleDisabled: boolean = false;
 
-  constructor(
-      elementRef: ElementRef,
-      private _ngZone: NgZone,
-      private _ruler: ViewportRuler,
-      platform: Platform) {
+  constructor(elementRef: ElementRef, private _ngZone: NgZone, platform: Platform) {
     // Only do anything if we're on the browser.
     if (platform.isBrowser) {
       this._containerElement = elementRef.nativeElement;
@@ -79,27 +74,26 @@ export class RippleRenderer {
     }
   }
 
-  /** Fades in a ripple at the given coordinates. */
-  fadeInRipple(pageX: number, pageY: number, config: RippleConfig = {}): RippleRef {
-    let containerRect = this._containerElement.getBoundingClientRect();
+  /**
+   * Fades in a ripple at the given coordinates.
+   * @param x Coordinate within the element, along the X axis at which to start the ripple.
+   * @param Y Coordinate within the element, along the Y axis at which to start the ripple.
+   * @param config Extra ripple options.
+   */
+  fadeInRipple(x: number, y: number, config: RippleConfig = {}): RippleRef {
+    const containerRect = this._containerElement.getBoundingClientRect();
 
     if (config.centered) {
-      pageX = containerRect.left + containerRect.width / 2;
-      pageY = containerRect.top + containerRect.height / 2;
-    } else {
-      // Subtract scroll values from the coordinates because calculations below
-      // are always relative to the viewport rectangle.
-      let scrollPosition = this._ruler.getViewportScrollPosition();
-      pageX -= scrollPosition.left;
-      pageY -= scrollPosition.top;
+      x = containerRect.left + containerRect.width / 2;
+      y = containerRect.top + containerRect.height / 2;
     }
 
-    let radius = config.radius || distanceToFurthestCorner(pageX, pageY, containerRect);
-    let duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
-    let offsetX = pageX - containerRect.left;
-    let offsetY = pageY - containerRect.top;
+    const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
+    const duration = RIPPLE_FADE_IN_DURATION * (1 / (config.speedFactor || 1));
+    const offsetX = x - containerRect.left;
+    const offsetY = y - containerRect.top;
 
-    let ripple = document.createElement('div');
+    const ripple = document.createElement('div');
     ripple.classList.add('mat-ripple-element');
 
     ripple.style.left = `${offsetX - radius}px`;
@@ -189,7 +183,7 @@ export class RippleRenderer {
   private onMousedown(event: MouseEvent) {
     if (!this.rippleDisabled) {
       this._isPointerDown = true;
-      this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
+      this.fadeInRipple(event.clientX, event.clientY, this.rippleConfig);
     }
   }
 
@@ -215,9 +209,9 @@ export class RippleRenderer {
   /** Function being called whenever the trigger is being touched. */
   private onTouchstart(event: TouchEvent) {
     if (!this.rippleDisabled) {
-      const {pageX, pageY} = event.touches[0];
+      const {clientX, clientY} = event.touches[0];
       this._isPointerDown = true;
-      this.fadeInRipple(pageX, pageY, this.rippleConfig);
+      this.fadeInRipple(clientX, clientY, this.rippleConfig);
     }
   }
 

src/lib/core/ripple/ripple.spec.ts

@@ -1,7 +1,7 @@
 import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
-import {ViewportRuler} from '@angular/cdk/scrolling';
+import {ViewportRuler, VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling';
 import {dispatchMouseEvent, dispatchTouchEvent} from '@angular/cdk/testing';
 import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
 import {
@@ -24,6 +24,7 @@ describe('MatRipple', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [MatRippleModule],
+      providers: [VIEWPORT_RULER_PROVIDER],
       declarations: [
         BasicRippleContainer,
         RippleContainerWithInputBindings,

src/lib/core/ripple/ripple.ts

@@ -18,7 +18,6 @@ import {
   InjectionToken,
   Optional,
 } from '@angular/core';
-import {ViewportRuler} from '@angular/cdk/scrolling';
 import {Platform} from '@angular/cdk/platform';
 import {RippleConfig, RippleRenderer} from './ripple-renderer';
 import {RippleRef} from './ripple-ref';
@@ -91,11 +90,10 @@ export class MatRipple implements OnChanges, OnDestroy {
   constructor(
     elementRef: ElementRef,
     ngZone: NgZone,
-    ruler: ViewportRuler,
     platform: Platform,
     @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions
   ) {
-    this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler, platform);
+    this._rippleRenderer = new RippleRenderer(elementRef, ngZone, platform);
     this._globalOptions = globalOptions ? globalOptions : {};
 
     this._updateRippleRenderer();
@@ -115,8 +113,8 @@ export class MatRipple implements OnChanges, OnDestroy {
   }
 
   /** Launches a manual ripple at the specified position. */
-  launch(pageX: number, pageY: number, config = this.rippleConfig): RippleRef {
-    return this._rippleRenderer.fadeInRipple(pageX, pageY, config);
+  launch(x: number, y: number, config = this.rippleConfig): RippleRef {
+    return this._rippleRenderer.fadeInRipple(x, y, config);
   }
 
   /** Fades out all currently showing ripple elements. */

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -10,7 +10,6 @@ import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {auditTime, takeUntil} from '@angular/cdk/rxjs';
-import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -225,14 +224,13 @@ export class MatTabLink extends _MatTabLinkMixinBase implements OnDestroy, CanDi
   constructor(private _tabNavBar: MatTabNav,
               private _elementRef: ElementRef,
               ngZone: NgZone,
-              ruler: ViewportRuler,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions) {
     super();
 
     // Manually create a ripple instance that uses the tab link element as trigger element.
     // Notice that the lifecycle hooks for the ripple config won't be called anymore.
-    this._tabLinkRipple = new MatRipple(_elementRef, ngZone, ruler, platform, globalOptions);
+    this._tabLinkRipple = new MatRipple(_elementRef, ngZone, platform, globalOptions);
   }
 
   ngOnDestroy() {