Overflow:hidden does not work in Safari

Question

I am stuck with a problem, I don't understand: my method to make YouTube images round is to put them in a container with

border-radius: 50%; 
overflow: hidden;

This works on Chrome and FF, but Safari places the image "over" the round container.

Please check the fiddle: http://jsfiddle.net/nikita_turing/2QyY3/

How do I make the images round on Safari?

Solution

in Safari 5.1.7 (PC) the position:relative on the image seems to prevent the border-radius from being applied

remove position:relative and set margin-left (instead of left) in your jQuery then it works

jsfiddle demo

Comments

[leosok]

Well thanks a lot - you solved it. But here's the next question for you: why is the border doing strange in safari? jsfiddle.net/nikita_turing/2QyY3/3

[MikeM]

appears to be a documented webkit bug (#72619) (with at least 3 dupes) and was resolved recently. Since Safari 5.1.7 came out May 2012 it doesn't have the fix.

[Daniel Guerra]

Aug/2014 and still broken. This is ridiculous

[MikeM]

@DanielGuerra broken in Safari 5.1.7 (PC) I assume?...Apple support has dried up for Safari on PC.

[blerg]

@leosok: Because Safari is the new IE.