Overflow Hidden on Video Element in Safari

Question

I have a video element that I want to hide inside a div with border-radius: 50%; This works fine and dandy on Chrome and Firefox, but not on Safari.

The gist of my css is this:

.back{
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-radius: 50%; 
}

.back video{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 150px;
    width: 267px;
}

Any ideas?

Answer 1

I tried what @indextwo recommended in his comment, and it worked!

Just add this to the parent of the <video> element:

transform: translate3d(0, 0, 0);