Reloading CSS only works with mouse over window

Question

This is a rather strange thing that I'm running into. I have a simple script to reload all the CSS files with jquery. For testing I execute it 4 seconds after the page loads.

setTimeout(function() {
    var newStr = '?v=' + Math.random(0,10000);
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, newStr);
    });
}, 4000);

This works, but only if my mouse is in the screen. If I reload the page and edit a CSS file within 4 seconds, and wait for the changes to show up, they do not show until I move my mouse into the window. I also tried by adding an alert(), which showed the alert and also showed the CSS changes as expected, however I don't want to show an alert when CSS is reloaded for obvious reasons.

Does anyone know how to force the window to think it's active, so that the CSS reloads without having to hover the mouse to the window? Thanks in advance.

Answer 1

Ok, I found the way to do it.

$('body').hide();
$('body').get(0).offsetHeight;
$('body').show();

Thanks to this article about forcing redraws.