Webkit border-radius and overflow bug when using any animation/transition Webkit border-radius and overflow bug when using any animation/transition google-chrome google-chrome

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);}