垂直调整div大小的Angular 9指令的调整速度非常慢

我有一个很奇怪的问题，显然我无法复制。我创建了一个简单的指令。在我们的一个主要登录页面上，在页面的右侧，我将有两个div相互堆叠，顶部一个将显示地图，底部一个将在mat表中显示搜索结果。该指令似乎在工作，但其行为是这样的：当我开始向下拖动顶部div时，鼠标会随着div的大小/变高而向前跳得越来越远。我得到的页面越向下，顶部div改变高度的速度越慢，鼠标相对于调整大小向下移动的速度越快（向上拖动也是如此）。我创建了一个stackblitz，希望获得相同的行为，但stackblitz工作完美无瑕，这正是我在应用程序中需要的，但在实际应用程序中使用Chrome的速度仍然非常缓慢

有没有人经历过鼠标向下/向上拖动与实际调整div大小计算之间的延迟时间是如何/为什么的

Stackblitz（就像我希望它在我的应用程序中那样工作=（）：

这是我的指示：

import {AfterViewInit, Directive, ElementRef, HostListener, OnDestroy} from '@angular/core';
import {fromEvent, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

@Directive({
  selector: '[appResizableDiv]'
})
export class ResizableDivDirective implements AfterViewInit, OnDestroy {
  topContainer: HTMLElement;
  draggableBar: HTMLElement;
  height: number;
  oldY = 0;
  canResize = false;
  destroy$ = new Subject();

  constructor(private el: ElementRef) { }

  ngAfterViewInit(): void {
    if (this.el) {
      this.topContainer = document.getElementById('resizable-container');
      this.draggableBar = document.getElementById('draggable-bar');
      this.height = parseInt((this.topContainer.offsetHeight).toString(), 10);
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    event.preventDefault();
    const target = event.target as HTMLDivElement;
    this.oldY = event.clientY;
    if (target.className.includes('drag-target')) {
       this.canResize = true;
       this.addMouseMoveListener();
    }
    this.canResize = true;
    this.addMouseMoveListener();
  }

  @HostListener('mouseup', ['$event'])
  onMouseUp() {
    this.canResize = false;
    this.destroy$.next();
  }

  resize(offsetY: number): void {
    this.height += offsetY;
    this.topContainer.style.height = this.height + 'px';
  }

  addMouseMoveListener(): void {
    fromEvent(document, 'mousemove').pipe(
      takeUntil(this.destroy$)
    ).subscribe(this.mouseMoveCallback.bind(this));
  }

  mouseMoveCallback(event: MouseEvent): void {
    console.log('Y: ', event.clientY);
    if (!this.canResize) {
      return;
    }
    if (event.clientY >= 730) {
      this.resize(730 - this.oldY);
      this.oldY = 730;
    } else {
      this.resize(event.clientY - this.oldY);
      this.oldY = event.clientY;
    }
  }
}

请注意，我还创建了一个完全被动的版本（这是我在提交PR之前将要做的事情，它工作正常，但与使用主机侦听器的行为完全相同） 如果您有任何想法，我们将不胜感激，谢谢

编辑：我刚刚用firefox尝试了stackblitz，对我来说，它实际上提供了chrome本地提供的奇怪行为