Image scale transform jumps (chrome blink engine only)

Asked Jun 18 '15 at 22:31

Active Jun 18 '15 at 22:58

Viewed 385 times

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

.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>

edited Jun 18 '15 at 22:58

asked Jun 18 '15 at 22:31

puchu

3,294
6
38
62

1

Its working great for me :/ – Adam Buchanan Smith Jun 18 '15 at 22:34
I will provide a video soon. – puchu Jun 18 '15 at 22:35
That is weird, it seems that the faster you mouse over the image the faster it resizes. Is that the actual case? – Adam Buchanan Smith Jun 18 '15 at 23:34
Webkit, gecko and IE browsers works fine. I don't know the part of css3 specification that allows such jump "acceleration". – puchu Jun 18 '15 at 23:39

Image scale transform jumps (chrome blink engine only)

0 Answers0