Since I already have wasted a lot of time, figuring it out, therefore it is better that I write it down for future reference, and may be someone else finds it useful, and can save a few hours!
As the title suggests, Safari and Chrome do not fire focus/blur events when the user uses the mouse to access checkboxes or radio buttons. It will work fine when you use the <Tab> key, but mouse click wouldn’t work as expected. It works perfectly in firefox. Here is an example:
http://jsfiddle.net/54y69/147/
Try it out on different browsers to experience the difference.
The fix is to associate the function with the click event. In my case we highlight the label when a form field is selected. So, I fixed it for checkboxes by binding to both click and focus events. Below is the pseudo code:
$('<selector>').bind('focus click', function(){ // Custom code });On a lighter note, how about banning all browsers except Firefox… ;)
In my opinion that is the easiest and quickest way to World Peace!
UPDATE: Mac version of firefox behaves similar to chrome. Thanks to Manoj for pointing that out. Filed a bug with Mozilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=756028