Saffari border radius overflow issue - html

Question

I have a situation like this: http://jsfiddle.net/uqhwt1wj/
HTML:
<div class="activity_rounded">
<img class="image" src="http://i.imgur.com/059cOzT.png?1" />
</div>
CSS:
.activity_rounded{
width: 165px;
height: 165px;
border-radius: 165px;
-moz-border-radius: 165px;
overflow: hidden;
margin: 0 auto;
position: relative;
margin-bottom: 30px;
background: #FFDE15;
}
.image{
max-width: 226px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
It works all good in all browsers, however in safari it seems like overflow: hidden ignores border radius of the block and hides overflow only for full div block(square). Tried to Google around, but haven't seen any solutions with horizontal centering that would work properly in my case.
Any suggestions, links or comments would help a lot.

Answer 1

in this case cross-browser solution that I decided to use was: using image as background image of a div instead of wrapping image element inside a div.
So now code looks like this(DEMO):
HTML:
<div class="activity_rounded"></div>
CSS:
.activity_rounded{
width: 165px;
height: 165px;
border-radius: 165px;
-moz-border-radius: 165px;
overflow: hidden;
margin: 0 auto;
position: relative;
margin-bottom: 30px;
background: url('http://i.imgur.com/059cOzT.png?1') no-repeat center #FFDE15;
}
Hope this helps to anyone as well.