Chrome 视频标签在翻译后呈现不正确

Question

从一个月前到现在，chrome 似乎在翻译后（或可能在频繁翻译后）错误地呈现视频。

我的chrome是版本：Version 78.0.3904.97 (Official Build) (64-bit).
我的OS：MacOS Catalina 10.15，但是Windows.
如果实际翻译是用库完成的，例如velocityjs，问题仍然存在。

下面是一个不适合我的例子。视频移动（有时），但有时视频会卡住并且不再移动。发生这种情况时，实际元素会移动，我会看到应该呈现视频的光标指针。我也可以从那里重新拖动它，但视频仍在屏幕上不应该出现的其他地方播放。尤其;如果视频的一部分在 window 之外（在此示例中为底部或右侧）

，则视频似乎 translate/update 正确

重现步骤：

为了获得更好的体验，请将代码段移至全屏，这样您就可以拖动更多区域。
点击并按住正在播放的视频。
稍微画圈拖动视频。不需要很快。
不再按住鼠标点击即可放下视频。
在拖动过程中，您应该看到视频没有跟随您的鼠标移动，并且视频现在应该呈现在与您放置它的位置完全不同的位置。不过，实际的视频元素位于正确的位置。

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>

任何 help/ideas?

Answer 1

这现在似乎已在问题版本和 Chrome Version 79.0.3945.88 (Official Build) (64-bit) 之间的某处修复。

Chrome 视频标签在翻译后呈现不正确

Chrome video tag renders incorrectly after translating

javascript

css

google-chrome

html5-video

translate-animation