How can I prevent the stutter that occurs while transitioning background-image?

Question

I am using background-size: cover; transition: background-image 4s; on an element and I have written some JS that changes the background-image property every 10 seconds.

The element transitions the background image in webkit browsers but the image shakes while transitioning.

How can I prevent that?

Here is a JSFiddle with an example of the behavior:

http://jsfiddle.net/michaelynch/x60gL1p6/

Answer 1

Instead of using background-size: cover;, use in % like background-size: 100% 190%;