css3 border radius animation transition in safari not working

Question

Trying to have a css3 ease transition work on border radius of an image in Safari.

It just kinda blinks into the hover state instead of smooth transition. Any help is much appreciated. My code is below:

CSS:

.all a:hover img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-filter: grayscale(0%);
}
.all a img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 50%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.all a img {
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.all a img {
    -webkit-filter: grayscale(100%);
    transition: border-radius .3s ease;
    -moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
    -webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;        
}

HTML:

<ul class="thumbs">
    <li class="all identity">
        <a href="projects/project_identity/index.html"><img src="https://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/></a>
    </li>
</ul>

Link to the site: https://imjoeybrennan.com

Answer 1

This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.

.all a:hover img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
    border-radius: 100px;

}

You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.