Countdown timer doesn't render right on Chrome/Safari, but OK on Firefox

Question

function countDownRound() {
    if(myRoundTimeRemaining >= 0){
        var secs = myRoundTimeRemaining;
        if(secs < 10)
        {
            secs = "0" + secs;
        }
        $("#countdown").html(':'+secs);
        CountdownTimer = setTimeout(countDownRound, 1000);
        myRoundTimeRemaining--;
    }
    else{
        $("#countdown").html('');
    }
}

The code above does what's expected, on Firefox. Every second a decreasing number is displayed in the "countdown" element.

On Safari and Chrome, the code runs properly, but the on-screen element does not change. If something else happens (such as resizing the browser window) the elements update properly while.

This looks like some kind of optimization or thread-based problem, but I can't find a solution.

Answer 1

Works fine for me too on Chrome, Safari and Firefox.

Perhaps in this case that you don`t need to use html tags to display your result, text() may work better than html() .

Try using

$("#countdown").text(':'+secs);

instead html().

OBS: Seems that some kids of instability on your operacional system can also affects browser rendering. Could someone please confirm or deny this?