Question

This one is driving me crazy. A FB app we are developing is having issues showing background images.

The app in question:
Rock Conquest

The issue:
The background images for the body and the DIV class MainHeader don’t display when you first load the app using Google Chrome. If you refresh the page then they show up. I can also get them to show up if I open the Element Inspector and un-check then re-check the background image box. After that they will continue to display properly until you close out Facebook/browser then log back in.

I’ve only seen this issue using Chrome and it only happens when visiting the app through Facebook. If I go directly to the app (http://www.rockconquest.net) then it works fine.

If I simply copy the page source for the front page then paste it into a static page it works fine without making any changes.

Answer 1

Chrome’s developer tools show that the request for two of your background images get “canceled”, but from a quick glance I can’t tell you why.

I don’t suppose you’re displaying these background images using JavaScript, as Patrick supspected in his answer (why would you) – but you could try using JavaScript for a “quick fix”/workaround:

On page load, generate two new Img objects and set their src attribute to the URL of your background images:

var whatever = new Img();
whatever.src = "…";

That might get Chrome to display them in the desired places automatically once they’re loaded – if not, then you could use the Img object’s onload/oncomplete handlers to explicitly set the background style of the elements again … I think at least then Chrome should finally display them.

And this should not hurt performance in other browsers, because if they managed to load the images on first try already, then they will just pull them out of their cache.