Is this a chrome bug?

Question

Summary

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 <= 84 bug? Or did I just mess up the styling?

Example image:

Working example:

.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;
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

Answer 1

"overflow:hidden to parent?" – Temani Afif

If you set the parent element overflow to hidden, the problem disappears.

https://jsfiddle.net/xnjvy04m

.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);
    overflow: hidden;
}


.parent video {
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

Answer 2

I don't know if you can call this a chrome bug.

The cause seems to be the video is going outside its parent container because of the border-radius.

You could either remove the border-radius

.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;
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

Or apply the transform to the video and let the parent autosize to the content

.parent {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(1, 300px);
    grid-template-rows: repeat(1, 500px);        
}


video {
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
    transform: rotate3d(1, 0.5, 0, 45deg) translate(50px, 50px);
}

<div class="parent">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" loop autoplay muted></video>
</div>

Hope this is useful to you.