Chrome CSS background-image problems with animation

Question

Here is the link to code https://jsfiddle.net/pk7zetdu/6/

$('.img_cont').addClass('rollIn');

  setTimeout(function(){
    $('.img_cont').removeClass('rollIn').addClass('rollOut');
  }, 3000);

  setTimeout(function(){
    $('#img_img').attr('src', 'http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg');
    $('.img_co....

Try to open it with latest stable chrome for windows.

First when it loads, you can see the slide (div) rolling in and rolling out, than image SRC is changed and div rolls in for the second time with new bg (maybe with a small img loading delay). All fine!

Then please press RUN button in fiddle and watch again. You now can see the slide (div) rolling in and rolling out, than image SRC is changed, but it rolls in with previous image in bg and changes it right after the animation is complete.

I can ensure you this has nothing to do with Image loading or fiddle it self, because it's a big problem in my real project. -webkit-backface-visibility: hidden; on IMG solves the issue, but introduces to other problems in more serious examples :(.

Any ideas?

================ UPDATE

When I change .rollOut opacity to something not zero (https://jsfiddle.net/pk7zetdu/8/), the problem is gone. Seems that when opacity of img parent is 0, chrome does not adjust new SRC, and has problems to adjust it while in animation.

Could it be a coincidence with how long it takes for the image to load? try and make sure the images are loaded before you do the timeouts. — Beep
Don't think so. See update jsfiddle.net/pk7zetdu/6 . Loading should not be the issue. 3 second is good to load :) — John T
After this small test jsfiddle.net/pk7zetdu/8 I start to suspect, that when opacity is 0, the image is not being loaded and some-have wrongly taken from cache while animating. — John T

Simple_Programmer Simple_Programmer · Accepted Answer · 2016-04-04T14:26:41

Your second image has a shadow around all its sides. You can see that if you open the image in a tab(you will see that the image has some gap from top and left). So your second image doesnt load with the first image in background. Its just the second image that has the white gap around it.

Changing the images will do the trick. Check this fiddle with different images. - https://jsfiddle.net/pk7zetdu/11/

As for the second image not rolling out after 3 seconds, you can change the setTimeout to setInterval

Chrome CSS background-image problems with animation

2 Answers