css - ホバー時の背景サイズの遷移により、クロムが背景画像を「振る」

Question

背景画像がホバー時にズームする、最近見た効果を達成しようとしています。私はここの例でほとんどそれをしました: https://jsfiddle.net/qyh6nbwt/しかし、それは非常に不安定なようです (あなたはそれの上にカーソルを置くことで私が意味することを理解するでしょう)、私は最新のクロムバージョンを実行している osx を使用しています。他のブラウザではまだチェックしていません。ズームイン時に「揺れ」ないようにスムーズにする方法はありますか？

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}