Question

Try the following link in any web browser on your desktop and then try it on any mobile browser (tried it on Android, iPhone & iPad – all produce same problem) and can someone tell me why the first ‘frame’ (well original sprite position) is always displayed behind the animation?

http://24hours-in.lincoln.ac.uk/projects/mus/animate2.html

Thanks!

Answer 1

Solved it! (with a fudge)

var character = null; 
var xOffset = 0;

function animate() {
    if(xOffset < 360){
        xOffset += 30;
    } else {
        xOffset = 0;
    }
    character = document.getElementById("character");
    character.style.backgroundImage = "url('char2.png')";
    character.style.backgroundPosition = xOffset + "px 0px";
    setTimeout(animate,250);
}

function init() {
    var character = document.createElement("div");
    character.id = "character";
    character.style.backgroundImage = "url('spacer.png')";
    character.style.position = "absolute";
    character.style.width = "30px";
    character.style.height = "65px";
    document.getElementById("stage").appendChild(character);
    animate();
}

window.onload = init;

I figured it was using a background fallback of the original image because of the transparency. Therefore, instead of starting off with the background image, I started off by applying a 1px transparent PNG file (abut assigning the rest of the CSS ready for the char PNG) and when it comes to the animation, I then substitute the background image to the char.PNG version.

I am sure there are more elegant ways, but this does the job!