Webkit border-radius and overflow bug when using any animation/transition
I had the same exact issue. Adding this to the parent container solved it for me (this is a LESS mixin).
.transitionfix() { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0)}
I added minus z-index value for image and higher value for parent
li {z-index:10; overflow: hidden;}li img {z-index: -10;}
I have faced this issue on Safari(It's a known bug in safari); fixed it by applying -webkit-mask-image and it works for me perfectly. cheers
.block { -webkit-mask-image: -webkit-radial-gradient(white, black);}