css - Background-image scale on hover - not smooth everytime -

i have simple div hover increase background image size.

it works, apart if move mouse in , out quickly, image jerks opposed smoothly growing , shrinking again.

this css:

.block__left {             background: url("http://tpwd.texas.gov/state-parks/big-bend-ranch/gallery/big-bend-ranch-camping-_u8e2700.jpg") no-repeat;             background-position: right -500px bottom -30px;             width: 100%;             height: 600px;             -webkit-transform: scale(1, 1);              -ms-transform: scale(1, 1);             transform: scale(1, 1);             -webkit-transition: 0.6s ease-in-out;             transition: 0.6s ease-in-out;         } .block__left:hover {             -webkit-transform: scale(1.1, 1.1);              -ms-transform: scale(1.1, 1.1);             transform: scale(1.1, 1.1);         } 

here fiddle

the question is: how make smooth every time?

i'm testing in chrome.

would work?

.block__left {   backface-visibility: hidden; }