一个月前到现在之间，Chrome在翻译后（或可能在频繁翻译后）似乎无法正确渲染视频。
- 我的镶边版本为：
Version 78.0.3904.97 (Official Build) (64-bit). - 我的操作系统：
MacOS Catalina 10.15，但是在Windows上也会出现此问题。 - 如果实际翻译是通过诸如
velocityjs之类的库完成的，则问题仍然存在。
以下是一个对我而言无法正常工作的示例。视频会移动（有时），但是有时视频会卡住并且不再移动。发生这种情况时，实际元素将移动，我会看到应该在其中渲染视频的光标指针。我也可以从那里重新拖动它，但是视频仍在屏幕上不应播放的其他地方播放。值得注意的是如果视频的一部分在窗口之外（在此示例中为底部或右侧），则视频似乎可以正确翻译/更新
复制步骤：
- 为了获得更好的体验，请将代码段移至全屏状态，以便您有更大的拖动区域。
- 点击并按住播放的视频。
- 将视频拖动到圈子中一点。不需要很快。
- 通过不再按住点击来删除视频。
- 在拖动过程中，您应该看到视频没有跟随鼠标的移动，并且视频现在应该在与放下的位置完全不同的位置进行渲染。不过实际的视频元素在正确的位置。
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>
有什么帮助/想法吗？