title: Is this a chrome bug?
body: <p><strong>Summary</strong></p>
  <p>I'm using chrome 84. When the video tag is in combination with a parent grid that is tilted, and when the video has any border-radius and object-fit set to cover, there appears extra parts of the video that shouldn't be there. Is this a chrome &lt;= 84 bug? Or did I just mess up the styling?</p>
  <p><strong>Example image:</strong></p>
  <p><a href="https://i.stack.imgur.com/bONmF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bONmF.png" alt="" /></a></p>
  <p><strong>Working example:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(1, 300px);
      grid-template-rows: repeat(1, 500px);
      transform: rotate3d(1, 0.5, 0, 45deg) translate(50px, 50px);
  }
  
  
  .parent video {
      width: 300px;
      height: 500px;
      object-fit: cover;
      border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted&gt;&lt;/video&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>