Background Image Flickers on WebKit-based browsers (Safari/Chrome)

Question

I have a image frame which constantly and quickly changes images when users drag over the frame. These images are Real-Time generated based on user's interaction so every image generated should be downloaded as soon as it become available. The highest speed could be 5 images per seconds. However, I have a image flickering problem when using Safari/Chrome. There is no such problem on Firefox. Every time the image is changed, the server will give browsers a new link to download the new image. The image frame will replace to the new image when the Javascript detects that image is downloaded completely. The code I used to detect the download completeness is shown below.

SImage = function(callback) // Define an image class with callback function
{
    var _this = this;
    var appname = navigator.appName.toLowerCase();
    _this.img = new Image();

    _this.get = function(url, answer){
        if (appname.indexOf("netscape") == -1){ // for IE
            _this.img.onreadystatechange = function () {
                if (_this.img.readyState == "complete"){
                    callback(_this.img.src);
                }
            };
        } else {    //other browsers, firefox, safari, chrome
            _this.img.onload = function () {
                if (_this.img.complete){
                    callback(_this.img.src);
                }
            };
        }       
        _this.img.src = url;
    }
};

And I use jquery to change the image background.

$('#layer_img').css('background-image', 'url("'+pviewImg.img.src+'")');

layer_img is a , and pviewImg is a SImage class.

I also recorded this problem on a youtube video, hope someone can understand my question and help me. If I miss some important information to help solve the problem, please point out. Thanks!

Answer 1

Hi, I'm noticing similar issues on large JPG's even with -webkit-perspective: 1000 and -webkit-backface-visibilty: hidden; I've also attempted -webkit-transform: translate3d(0,0,0); Only flickers on images.