Chrome CSS动画背景图片问题

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.

Answer 1

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

Answer 2

This was Chrome March built bug. It's fixed in newest version. Anyway (if you care about march version) a quick fix is to set Opacity to something like 0.0001 instead of 0, when fading out. There is no good solution.