CSS Background Images not loading

Question

I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.

when you then F5 the page, the background images all load in.

When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.

Neither when you check the downloaded resources are there even any mention of the background-images downloading.

you then refresh the page and it works fine, tool-tip of the css url even shows a preview.

The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.

Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.

I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);

});

this happens on every instance of windows in multiple versions of chrome.

any ideas would be great! thankyou!

you might be able to see it happen on http://ensa.ac.uk

here is a video demonstration @ http://youtu.be/oLTyhk5rXgE

Answer 1

Just to note.

The problem had been solved.

The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.