background-size transition on hover causes chrome to “shake” background image

Question

I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in?

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

Answer 1

just use transform, scale.

so just instead of setting the bg image to 160% use

transform:scale(1.5);

some information about the transform css property you can find here

to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.

see updated fiddle.

greetings timmi

Answer 2

Used transform scale instead of a background-size change transition: https://jsfiddle.net/qyh6nbwt/

transform: scale(2, 2);

Answer 3

So I made this my mission to figure this out, turns out it wasn't quite as simple of a fix as I thought.

It's a little dirty, but you need to frame your div within a div like this:

<div class="example">
    <div></div>
    <p>test</p>
</div>

Then from here, you can target the zooms more accurately, like this:

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.example:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

You can adjust the zoom and speed using the scale and transition properties.

Here is a working fiddle to demonstrate. Hope this helps, I checked in Chrome/Safari/Firefox and it seems to work pretty well.