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/

I didn't think that `background-image` **was** actually animatable/transitionable with CSS...so I'm not sure what the heck is going on. Yep...it's not [**MDN**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) — Paulie_D, Jun 17 '15 at 14:55
@Paulie_D: Yes, you can transition background-image in webkit browsers. — Michael Lynch, Jun 17 '15 at 14:57
Is there an official source for that? If it's experimental (as I suspect) then bugs are to be expected. — Paulie_D, Jun 17 '15 at 15:02
@Paulie_D I don't have one, and I understand that this may be experimental, but I'm still curious if there is a solution to the problem. Obviously webkit has implemented `transition: background-image` because it's working. It's just not working smoothly. — Michael Lynch, Jun 17 '15 at 15:15

score 0 · Answer 1 · answered Sep 08 '15 at 10:20

0

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

answered Sep 08 '15 at 10:20

soundar

112
1
14

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

1 Answers1