親のdivに設定された境界線の半径をトリミングするのがSafariで機能しない

div内に画像が配置されていると、画像の角を隠して円として表示するための角が丸くなります。 Safariを除くすべてのブラウザで動作します！誰もそれを修正する方法を知っていますか？親のdivに設定された境界線の半径をトリミングするのがSafariで機能しない

私は-webkit-padding-box,-webkit-mask-box-imageを試しましたが、どちらもうまくいきませんでした。

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

出典

2013-05-14 razzak