Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow Hidden on Video Element in Safari

Tags:

html

css

safari

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?

like image 890
Jan Drewniak Avatar asked Apr 08 '14 09:04

Jan Drewniak


1 Answers

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);
like image 61
aleclarson Avatar answered Nov 09 '22 20:11

aleclarson