Effect ': hover' with 'transform' is defective in Google Chrome when it leaves ': hover'

Question

Effect ': hover' with 'transform' is defective in Google Chrome when it leaves ': hover'

Navigation

#1 by (1 votes)

0

I created a hover effect that zooms scale(1.5) into the image, but when it exits the hover the border-radius of the image redoes the square image before to return to border-radius original. The problem only happens in Chrome and Safari. Here is 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"><ahref="#">
		<div class="retina"></div>
	</a>
</div>

Does anyone know what's wrong?

css google-chrome css-hover

asked by anonymous 21.03.2017 / 01:49

1 answer

Error installing Mariadb How do I get a part of a filename in shell script?

score 1 · Accepted Answer

This happens because during the transition ( transition ) the child elements 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 transform: translateZ(0); in the wrapper element. 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.