Chrome视频标签翻译后呈现错误

Question

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

• 我的chrome版本为：Version 78.0.3904.97 (Official Build) (64-bit).
• 我的操作系统：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

这一问题现在似乎已经在问题版本和ChromeVersion 79.0.3945.88 (Official Build) (64-bit)之间得到了解决。