CSS3 transform - масштабная анимация иногда snapback на Chrome

Question

Когда я многократно перебираю изображения на двух изображениях, анимация масштаба иногда бывает snapback. Тем не менее, анимация масштаба отлично работает в Firefox. что я сделал не так?

ul li .image{ 
    display:inline-block; 
    -webkit-transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -o-transition: .2s ease-in-out; 
    transition: .2s ease-in-out; 

    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 
ul li:hover .image{ 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

вот example на jsfiddle

Answer 1

Я просто добавил width:100.1% и height:100.% для :hover то работает отлично на Chrome снова. Он должен быть каким-то хак, но это работает для меня все равно, вот код обновления

ul li .image{ 
    display:inline-block; 
    width:100%; 
    height:100%; 
    -webkit-transition: .2s ease-in-out; 
    -moz-transition: .2s ease-in-out; 
    -o-transition: .2s ease-in-out; 
    transition: .2s ease-in-out; 

    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 
ul li:hover .image{ 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    width:100.1%; 
    height:100.1%; 
}