Chrome video tag renders incorrectly after translating

Somewhere between a month ago and now, chrome seems to be incorrectly rendering a video after a translation (or maybe after frequent translations).

• My chrome is version: Version 78.0.3904.97 (Official Build) (64-bit).
• My OS: MacOS Catalina 10.15, however the problem also occurs on Windows.
• If the actual translating is done with a library, such as velocityjs, the problem still occurs.

Below is an example that does not work properly for me. The video moves (sometimes), however other times the video gets stuck and does not move anymore. When this happens the actual element is moved and I see the cursor pointer where the video is supposed to be rendered. I can also re-drag it from there but the video is still playing somewhere else on the screen where it isn't supposed to be. Notably; the video does seem to translate/update properly if part of the video is outside of the window (either bottom or right in this example)

Steps to reproduce:

1. For a better experience move the snippet to fullscreen so you have more area to drag.
2. Click and hold the playing video.
3. Drag the video around in circles a bit. Doesn't need to be fast.
4. Drop the video by not holding the click anymore.
5. During the dragging you should of seen the video not following your mouse movement and the video should now be rendered at a completely different place than where you dropped it. The actual video element is in the right spot though.

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>

Any help/ideas?

This now appears to be have been fixed somewhere between the question version and Chrome Version 79.0.3945.88 (Official Build) (64-bit).