CODEWITHSUNDEEP
htmlcsssafari
Mindaugas
Mindaugas

Reputation: 1173

Saffari border radius overflow issue

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.

Upvotes: 0

Views: 61

Answers (1)

Mindaugas
Mindaugas

Reputation: 1173

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.

Upvotes: 2

Related Questions