Il ritaglio degli angoli dell'immagine con il raggio di bordo impostato su padre div non funziona in Safari

Question

Ho un'immagine posizionata all'interno di un div, il div ha angoli arrotondati che funzionano come una maschera per nascondere gli angoli dell'immagine e visualizzarla come un cerchio . Funziona su tutti i browser ad eccezione di Safari! qualcuno sa come risolverlo?

Ho provato -webkit-padding-box, -webkit-mask-box-image ma entrambi non hanno funzionato.

HTML:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div> 

CSS:

.cat{ 
    width: 128px; 
    height: 128px; 
    margin: 20px 96px 0px 96px; 
    position: relative; 
    float: left; 
    border-radius: 50%; 
    overflow: hidden; 
    border-top: 1px solid #111; 
    border-bottom: 1px solid #fff; 
    background: #fff; 
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); 
} 

.cat img{ 
    position: absolute; 
    border: none; 
    width: 138px; 
    height: 138px; 
    top: -8px; 
    left: -8px; 
    cursor: pointer; 
} 

fiddle

Answer 1

Quale versione di Safari lavorate con?

Diverse spiegazioni (insoddisfacenti) per questo problema: How to make CSS3 rounded corners hide overflow in Chrome/Opera

State prendendo fuori <img /> del flusso di contenuti con position:absolute;. Così facendo, si dovrebbe anche cambiare l'attributo di visualizzazione in blocco. Quindi ha senso mettere il raggio di confine su img.

Vedi http://jsfiddle.net/Volker_E/LgYrz/
Nota: Su molto vecchie Webkits (Safari < 5,0) -webkit-border-radius is necessary

Answer 2

Il miglior modo per aggirare questo è specificando overflow: hidden; sull'elemento genitore.

Answer 3

Un'altra soluzione semplice consiste nell'aggiungere la proprietà border-radius al tag img e assegnargli lo stesso valore.

BTW è possibile utilizzare il tag HTML5 figure per contenere le immagini -Non hanno testato in più di un paio di browser per un po 'ma l'ultima volta ho fatto ancora necessaria la doppia border-radius soluzione in un vecchio Firefox.