Page Styles and Images Lost in google chrome after page refresh (F5)

Question

I have a problem browsing my site collection using Google Chrome. This happened after I enabled Blob Cache. Every time I hit F5 my site is not rendering styles and images. Just text. That doesn't happen with Firefox or IE If I hit ctrl + F5 then everything is ok. I see, with fildder, that some css and image have 304 status, and I thinks is OK since I enabled blob Cache.

What should I do, in order to make my site appear as it should even after refreshing it in Google Chrome?

Thank you

Answer 1

Chrome responds unexpectedly in some situations where the server returns 304 (telling browser to render cached asset) chrome just doesn't load the asset. After weeks of messing about this here is a brute force solution to force chrome to reload css on each request to the page.

Include this below on your page to fix the issue:

function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}


$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 

if($.browser.chrome){
reloadStylesheets() ;
}