Imagen con el radio del borde + el color del borde no funciona en Chrome / Safari iOS

Estoy tratando de averiguar por qué una image con un radio de borde circular y un borde blanco no funciona en Chrome / Safari en iOS. Funciona en mi escritorio.

Aquí hay una captura de pantalla de lo que parece, junto con mi HTML / CSS:

Captura de pantalla: http://i46.tinypic.com/29z61c4.jpg

HTML:

<div class="span4"> <img class="img-circle" src="assets/img/subfeatunetworking1.jpg"> <h3>Feature 1</h3> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p><a class="btn btn-primary" href="#">View details »</a></p> </div> 

CSS:

 .img-circle { width: 70%; border: 10px solid white; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1); -moz-box-shadow: 0 5px 12px rgba(0,0,0,1); box-shadow: 0 5px 12px rgba(0,0,0,1); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } 

Compruebe que la versión de su browser es antigua y por eso se produce este problema. y no necesita usar la propiedad background-clip .

chequea esto, demo jsFiddle

HTML

 <img class="img-circle" src="http://3.bp.blogspot.com/-J_QabuviUDk/UEdgMt2AvfI/AAAAAAAAEIQ/yPc1XekoSnE/s1600/800px-Rectangle_example.svg.png"> 

CSS

 .img-circle { width: 80%; border: 10px solid white; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1); -moz-box-shadow: 0 5px 12px rgba(0,0,0,1); box-shadow: 0 5px 12px rgba(0,0,0,1); } 

Chrome y Safari prefijan el mismo vendedor, así que creo que funciona en safari, no estoy seguro al 100%.