Laggy opacity change in Chrome with large scaled images

Question

I have a simple slide show where I fade out the current photo before displaying the new one. It works great under FF and IE, but effect is very laggy in Chrome...

I spotted that lagginess in Chrome appears only on large scaled images

Here is the code to reproduce :

    this.oldimg  = this.img;
    this.img = new Image(); 
    $(this.img).css({width: '90%', height: '90%'});
    $(this.img).attr("src", "//file.jpg");
    $("body").prepend(this.img);
    if(this.oldimg) $(this.oldimg).fadeTo(600, 0, function() { $(this).remove();  });

Working demo here : http://jsfiddle.net/f3tta/18/embedded/result/

(Note: Comments were made in reference to a previous demo avoiding browser cache here)

Can you reproduce? What solution do I have to avoid the lagginess without having to serve perfectly scaled images ?

Answer 1

Ok, so if anybody comes here with the same problem, I found a solution to bypass the issue :

if(this.oldimg) $(this.oldimg).delay(50).fadeTo(600, 0, function() { $(this).remove();

I don't know why, when we delay the fading out a little, chrome play the effect almost normally.