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

You can sort of fix it with adding `transform: scale(1.1);` onto the `:hover`, but this doesn't fix it completely. Very interested to see why this is. — knocked loose, May 13 '15 at 15:01
Well, i have dirty workaround if you want to see : https://jsfiddle.net/qyh6nbwt/2/ But its seems chrome performance issue. — Al-Mothafar, May 13 '15 at 15:06

score 6 · Accepted Answer · answered May 13 '15 at 15:07

6

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

answered May 13 '15 at 15:07

Timotheus0106

1,536
3
18
28

This is a simple solution, but this also zooms in on the text "Test" which might have gone against OP's intentions. – knocked loose May 13 '15 at 15:25
I was having problems when a transition on the background-size of a div with a large background-image (2Mb) made the browser image cache to crash, forcing me to "force refresh" (CTRL+F5) to recover the image in all the browser tabs this image appears. Changing the background-size transition to a transform:scale, bypassed this bug. – Leopoldo Sanczyk Apr 10 '16 at 21:22

score 1 · Answer 2 · answered May 13 '15 at 15:10

1

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

transform: scale(2, 2);

answered May 13 '15 at 15:10

Ajarat

21
3

score 1 · Answer 3 · answered May 13 '15 at 15:23

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.

background-size transition on hover causes chrome to "shake" background image

3 Answers3

Linked