javascript - Chrome 视频标签翻译后渲染不正确

Question

从一个月前到现在，chrome 似乎在翻译后(或者可能在频繁翻译后)错误地渲染了视频。

• 我的 Chrome 版本为:版本 78.0.3904.97(官方版本)(64 位)。
• 我的操作系统:MacOS Catalina 10.15，但 Windows 上也会出现此问题。
• 如果实际翻译是使用 velocityjs 等库完成的，问题仍然会发生。

下面是一个对我来说不能正常工作的示例。视频(有时)会移动，但有时视频会卡住并且不再移动。当发生这种情况时，实际元素被移动，并且我看到光标指针应该在应该渲染视频的位置。我也可以从那里重新拖动它，但视频仍在屏幕上不应该在的其他地方播放。尤其;如果视频的一部分位于窗口之外(本例中为底部或右侧)，则视频似乎确实可以正确翻译/更新

重现步骤:

1. 为了获得更好的体验，请将代码段移至全屏，以便您有更多区域可以拖动。
2. 点击并按住正在播放的视频。
3. 将视频稍微绕圈拖动。不需要太快。
4. 不再按住鼠标按钮即可删除视频。
5. 在拖动过程中，您应该看到视频不跟随鼠标移动，并且视频现在应该呈现在与您放置视频的位置完全不同的位置。不过，实际的视频元素位于正确的位置。

console.clear();

let dragging = false;
let dragStartX = 0;
let dragStartY = 0;

const root = document.getElementById('root');
const container = document.getElementById('container');
const video = document.getElementById('video');

function onMouseDown(e) {
  if (!dragging) {
    dragging = true;
  }
}

function onMouseMove(e) {
  if (dragging) {
    const diffX = (e.clientX - dragStartX);
    const diffY = (e.clientY - dragStartY);
    container.style.transform = 'translate(' + diffX + 'px,' + diffY + 'px)'
  }
}

function onMouseUp(e) {
  if (dragging) {
    dragging = false;
  }
}

#video {
  display: flex;
  max-height: 200px;
  max-width: 360px;
  pointer-events: none;
}

#container {
  display: flex;
  background-color: '#FA0050';
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
}

<div id='root' style='width: 100%; height: 100vh'onMouseMove='onMouseMove(event)' onMouseUp='onMouseUp(event)'>
    <div
      id='container'
      onMouseDown='onMouseDown(event)'
    >
      <video
        id='video'
        autoplay
        muted
        loop
        controls
        src='https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4'
      />
    </div>
</div>

有什么帮助/想法吗？

Answer 1

现在似乎已在问题版本和 Chrome 版本 79.0.3945.88(官方版本)(64 位)之间的某个位置修复了。