Why is $(document).blur() and $(document).focus() not working with Safari or Chrome?

Question

I am making a counter which counts down when document is on focus. It stops counting down when it's on blur.

It is working in FF, but with Safari and Chrome, the counter doesn't work at all.

Is there a compatibility problem with Safari/Chrome?

All I'm using is $(document).blur() and $(document).focus(), and there are both within a $(document).ready() block.

var tm;
$(document).ready(function(){   

        var seconds = 50;
        $('#timer').html(seconds);
        countdown();

    $(window).focus(function(){
         function countdown(){ 
         if (seconds > 0) {
            seconds--; 
            $('#timer').text(seconds);
            tm = setTimeout(countdown,1000);
            }
        if (seconds<=0){ 
            $('#timer').text('Go');
            }   
        }); 



    $(window).blur(function(){
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);

    });
});

Answer 1

I've always used $(window).focus() and $(window).blur(). Try these instead.

Also, note that in FF and IE the "focus" event fires on ~document load, while in Chrome and Safari it only fires if the window had lost focus before and now it has regained it.

UPD: Now as you pasted your code, I reworked it to (hopefully) fit your purpose:

var tm;
var seconds = 50;
var inFocus = true;

function countdown() {
    if (seconds > 0) {
        seconds--;
    }

    if (seconds <= 0) {
        $('#timer').text('Go');
    }
    else {
        $('#timer').text(seconds);
        tm = setTimeout(countdown, 1000);
    }
}

$(function() {
    $('#timer').html(seconds);
    countdown();

    $(window).focus(function() {
         if(!inFocus) {
             countdown();
         }
    });

    $(window).blur(function() {
        inFocus = false;
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);
    });
});