':Hover' effect with 'Transform' shows a defect in Google Chrome when exiting ':Hover'

Question

I created an effect Hover zooming scale(1.5) in the image, but when it leaves the Hover the border-radius the image returns the square image before returning to border-radius original. The problem only happens in Chrome and Safari. Follow my code below:

.hoverzoom {
	position: relative;
    min-width: 250px;
    overflow: hidden;
    border-radius: 8px;
}
.hoverzoom > img {
   width: 100%; 
	border-radius: 8px;
	-webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom:hover > img {
	-webkit-transform: scale(1.5);
	   -moz-transform: scale(1.5);
	    -ms-transform: scale(1.5);
	     -o-transform: scale(1.5);
	        transform: scale(1.5);
}
.hoverzoom .retina{
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;    
    background: none repeat scroll 0 0 rgba(31, 124, 43, 0.5);    
    border-radius: 8px;
    text-align: center;
    padding: 30px;
 
    -webkit-transition:	 all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	    -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	     -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	      -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
	         transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); 
}
.hoverzoom:hover .retina {
    opacity: 1;
    box-shadow: rgba(0,0,0,.5);
    
}

<div class="hoverzoom">	
	<img src="https://i.stack.imgur.com/aipDU.jpg">
	<a href="#">
		<div class="retina"></div>
	</a>
</div>

Does anyone know what’s wrong?

Answer 1

This is because during the transition (transition) the elements child are not "masked". But at the end of the transition, the situation already becomes OK again.

This is a known bug in Webkit-based browsers
border-Radius clipping without a Stacking context does not apply to composited Children

You can solve this problem in two ways by adding a z-index positive, for example z-index:1; or a transform: translateZ(0); in the element wrapper. Here is an example below:

.zoomTransition {
    -webkit-transition:  all .8s cubic-bezier(.190, 1.000, .220, 1.000);
        -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
         -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
          -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
             transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);
}
.hoverzoom {
    position: relative;
    width: 250px;
    overflow: hidden;
    border-radius: 8px;
    z-index:0;
}
.hoverzoom img {
   width: 100%; 
    border-radius: 8px;
}
.hoverzoom:hover img {
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
}
.hoverzoom .retina{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;    
    background: none repeat scroll 0 0 rgba(31, 124, 43, 0.5);    
    border-radius: 8px;
    text-align: center;
    padding: 30px;
}
.hoverzoom:hover .retina {
    opacity: 1;
    box-shadow: rgba(0,0,0,.5);
}

<div class="hoverzoom" style="margin:auto">	
    <img src="//lorempixel.com/250/250/city" class="img-responsive center-block zoomTransition">
    <a>
        <div class="retina zoomTransition"></div>
    </a>
</div>

I also made some adjustments to the CSS code, removing the second addition of transitions that was unnecessary and pointing styles to the image in a more practical way.