The countdown timer does not display correctly in Chrome / Safari, but OK in 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 above code does what is expected in Firefox. Every second, a decreasing number is displayed in the countdown element.

In Safari and Chrome, the code works correctly, but the item on the screen does not change. If something else happens (for example, resizing the browser window), the elements are updated correctly.

It looks like an optimization or a thread based problem, but I cannot find a solution.

Answer 1

Works well for me also in Chrome, Safari and Firefox.

Perhaps in this case you do not need to use html tags to display your result, text () may work better than html () .

Try using

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

instead of html ().

OBS: It seems that some children of instability in your operating system can also influence browser rendering. Can anyone confirm or deny this?