CODEWITHSUNDEEP
animationsafariwebkitcss
imjoeybrennan
imjoeybrennan

Reputation: 67

css3 border radius animation transition in safari not working

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

Upvotes: 0

Views: 5168

Answers (2)

nickspiel
nickspiel

Reputation: 5670

The following applied to the parent element with the border radius applied to kick webkit back into line for me:

-webkit-mask-image: -webkit-radial-gradient(white, black);

Another option is to wrap the element in two border radius parents.

Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.

Upvotes: 3

2ne
2ne

Reputation: 5996

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.

Upvotes: 2

Related Questions