diff --git a/components/resizable/resize-handle.component.ts b/components/resizable/resize-handle.component.ts index 55bdf3e04c..6399317764 100644 --- a/components/resizable/resize-handle.component.ts +++ b/components/resizable/resize-handle.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { normalizePassiveListenerOptions } from '@angular/cdk/platform'; import { ChangeDetectionStrategy, Component, @@ -35,6 +36,8 @@ export class NzResizeHandleMouseDownEvent { constructor(public direction: NzResizeDirection, public mouseEvent: MouseEvent | TouchEvent) {} } +const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true }); + @Component({ selector: 'nz-resize-handle, [nz-resize-handle]', exportAs: 'nzResizeHandle', @@ -75,9 +78,12 @@ export class NzResizeHandleComponent implements OnInit { }); this.ngZone.runOutsideAngular(() => { + // Note: since Chrome 56 defaults document level `touchstart` listener to passive. + // The element `touchstart` listener is not passive by default + // We never call `preventDefault()` on it, so we're safe making it passive too. merge( - fromEvent(this.host.nativeElement, 'mousedown'), - fromEvent(this.host.nativeElement, 'touchstart') + fromEvent(this.host.nativeElement, 'mousedown', passiveEventListenerOptions), + fromEvent(this.host.nativeElement, 'touchstart', passiveEventListenerOptions) ) .pipe(takeUntil(this.destroy$)) .subscribe((event: MouseEvent | TouchEvent) => {