Safari Error

Border radius not working with position absolute/relative & transform: scale()

by Shishir Morshed

HTML

<div class="circle">
    <img src="http://shishirmorshed.github.io/cloud-resources/images/external/ghashful.jpg" />
</div>

CSS

.circle {
    margin:auto;
    width:150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}
.circle img {
    max-width:300%;
    max-height: 100%;
    cursor:pointer;
}

/* Error 1: if we use position relative or absolute brder radious or will not work in safari */
/* .circle img {
    position: relative;
} */

/* Error 2:  If we use scale radious or will not work in safari */
/* .circle img {
    -webkit-transform: scale(1);
} */