Estou tentando obter um efeito que vi recentemente, em que a imagem de fundo é ampliada ao passar o mouse. Eu praticamente fiz isso com exemplo aqui:https://jsfiddle.net/qyh6nbwt/ mas parece estar muito instável (você entenderá o que quero dizer com o mouse), estou no osx executando a versão mais recente do chrome, ainda não o verifiquei em outros navegadores. Existe uma maneira de torná-lo mais suave, para não "tremer" ao aumentar o zoom?

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;
}