IE background-image doesn't display with jQuery

(sort of, and except on alert)

[RevoltPuppy]

I am having a problem with a jQuery plug-in that I am trying to fix. The following function runs, for example, three times.

First, when the page loads, there is a background-image that gets set. This is the main map. Then, when you click a section of this map, it zooms in, and a new background-image is set (the new, zoomed-in map). When you close out of the new map, the function runs a 3rd time, when you go back to the original zoomed-out map, and the background-image is set again.

This works in all browsers except everybody's favorite: IE. It doesn't matter which version. When I zoom out to see the full map, it's blank. Only the background-color shows. And it's only when I zoom out that it doesn't display; when the page loads, I can see it just fine. When I zoom in again, the zoomed-in map displays just fine.

Now, the funny thing is, if I uncomment the alert, it will tell me what background-image is supposed to display, and the file path points to the correct image every time, so I know the image is there. AND when the alert fires off, the background-image shows up like normal! Is there any explanation for this?

Here is the function in question.

function displayMap(region){
 //Set Current Region Id
 $(this).data('currentId', region.id);
 //Set new styles.
 var mapSettings = {
 'background-color':'#cccccc',
 'width':settings.width,
 'height':settings.height,
 'background-image':'url(' + region.image + ')'
 }
//Clear the Map and Set the Background Image
 map.empty().css(mapSettings);
 var check = map.css('background-image');
 //alert(check);
 
 //Load Region Data
 loadRegionData(region);
}

Finally, occassionally, every-so-rarely the first time I load the map, zoom in, and zoom back out, the zoomed-out map will display just fine. If I zoom in and zoom out again, it breaks forevermore after that.

[whoisgregg]

These are the hardest bugs to track down, when you can't reliably reproduce the problem.

One line that jumps out at me, is this one:

 var check = map.css('background-image'); 

I'm not familiar with jQuery, but I don't see what that line could be doing. Perhaps removing it would help?

Also, could it be that there is occasionally some problem with the settings.width/settings.height values that are preventing javascript from parsing the rest of the mapSettings object? I would try removing all code except the code which sets the background image and see if you continue to have spotty results.

HTH