Image scale transform jumps (chrome blink engine only)

403 views Asked by At

Please move cursor from the center of image to whitespace and back. Image jumps to the max scale without animation.

Video

.wrapper {
    margin : 120px;
}
.wrapper img {
    display : block;
    width : 400px;
    
    -webkit-transition: -webkit-transform 300ms linear;
    -moz-transition:    -moz-transform    300ms linear;
    -ms-transition:     -ms-transform     300ms linear;
    -o-transition:      -o-transform      300ms linear;
    transition:         transform         300ms linear;
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:      hidden;
    backface-visibility:         hidden;
}
.wrapper img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform:    scale(1.5);
    -ms-transform:     scale(1.5);
    -o-transform:      scale(1.5);
    transform:         scale(1.5);
}
<div class="wrapper">
    <img src="http://retriever-club.org/wp-content/uploads/2013/01/vospitanie-shhenka_2.jpg" />
</div>

0

There are 0 answers