rileva un overflow errato con raggio di confine

Question

Come sappiamo, overflow: hidden in combinazione con border-radius non funziona in tutto il browser come dovrebbe, ovvero Safari e Opera hanno problemi a tagliare gli angoli arrotondati dalle immagini contenute.

Esempio HTML:

<a class="circle" href="#"> 
    <img src="http://placekitten.com/300/300" alt="kitten" /> 
</a> 

e corrispondente CSS:

.circle { 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    height: 120px; 
    overflow: hidden; 
    width: 120px; 
} 

controllo questo jsfiddle

Ho un ripiego per Safari e Opera con sfondo-immagini, ma io voglio solo usarlo nel caso overflow non funziona bene. Ora, non voglio semplicemente utilizzare il rilevamento del browser per known reasons, ma voglio rilevare la funzionalità la possibilità di tagliare gli angoli nel modo giusto. Normalmente vorrei verificare come questo:

if('overflow' in document.body.style){ 
    // overflow 
} else { 
    // no overflow 
} 

Ma questo non aiuterà questa volta ... Quindi, non v'è alcun modo per verificare in modo corretto?

Answer 1

Perché non css hack?

@media screen and (-webkit-min-device-pixel-ratio:0) { 

} 

Credo che questo riguarderà il safari e l'opera.

Sì, chrome è anche webkit. No, non sarà interessato.

souce: http://css-tricks.com/is-there-any-dedicated-css-hacks-for-safari-or-opera/

Opera ha anche fornitore selettore CSS che è più sicuro imo:

x:-o-prefocus { 
}