css3 - Image scale transform jumps (chrome blink engine only) -


please move cursor center of image whitespace , back. image jumps 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>


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -