Chrome: background-images not rendered after refreshing page + javascript redirect

Question

I'm working on a website that loads pages through ajax. I keep track of the current location using the #!/url syntax. If, when the page is firsty loaded, that page already has a url in the hash part of the url, I redirect to that page using javascript:

document.location = initialPage;

My content consists of a bunch of divs with position:absolute that are stacked in the correct order for display. My body background is a set of images that are periodically switched using jQuery slide. This works in all browsers, except (and here's the problem) in Chrome I sometimes lose the background images of my content divs. The most reliable way to reproduce is:

• Go to a page: eg http://epsilon.tabeoka.be/fr/gestiondeprojet
• Click a link to another page, eg "Offres d'emplois", url now becomes http://epsilon.tabeoka.be/fr/gestiondeprojet#!/fr/offresdemplois
• Now refresh using Ctrl-F5
• Bingo!

Notice that if you now refresh using Ctrl-F5 again, the page will look fine again. There is no significant javascript that runs on page load in either case. The background scroll is initialized, but the problem exists on pages without the backgrounds as well (the project pages). I'm leaning towards this being a bug in Chrome, but I need this working. Can anyone suggest something?

Menno

Answer 1

Try to use absolute path for backgrounds on the CSS. Maybe it can help to determine the problem.

Also you can try to apply backgrounds to blocks after page loading

$(document).ready{
  $("#content").css("background","url(../Images/Css/bg_content.png)");
}

Also maybe this will be usefull. When i request sample page like http://epsilon.tabeoka.be/fr/contacts . Browser did 41-42 requests and uploads all images. When i make it your way (with Ctrl-F5 pressed) - browser done only 31-33 request. He dont upload the images for backgrounds. Looks like he think that they allready uploaded.

So when i disabled the cache on chrome - bug disappears.

Maybe you should try to add all background attributes into your page instead of CSS and also add to it random value like this:

<style>
  #content {
    background:url(../Images/Css/bg_content.png?rnd=123124);
  }
</style>

Answer 2

If it's really a Chrome bug (see my comment on your question), you can try replacing your background-image with an rgba background-color. It's better and you can add a fallback for old browsers.

background-color: rgb(16,34,68);
background-color: rgba(16,34,68,.75);