3

This issue is driving me absolutely bonkers and I really appreciate any assistance! For some odd reason Chrome will sometimes not show the background images on a site I recently developed. I think it has something to do with a a Chrome cache issue and I've attempted all fixes in other posts on this site. The site works fine with Safari and Firefox on the Mac...

http://inkandpapermovie.com/

When clicking on each button for Watch, About, Filmmakers, Press, Contact I'm using jquery to fadein each div and fadeout all other divs. The background image for each page is defined in my css file. Each div has it's own background-image:url defined as well as properties defined for all.

#watch, #story, #about, #cast, #filmmakers, #press, #contact {
position:absolute; 
top:190px; 
left:50%; 
margin-left:-575px; 
width:955px;
height:608px;
display:none;

}

#watch{
background-image:url(../images/bg-watch.png);
}

#about{
background-image:url(../images/bg-about.png);
}

#filmmakers{
background-image:url(../images/bg-filmmakers.png);
}

#press{
background-image:url(../images/bg-press.png);
}

#contact{
background-image:url(../images/bg-contact.png);
}

and the javascript to define the fadein and fadeout buttons.

$(document).ready(function() {

$("a.watchBtn").click(function() {
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#watch").fadeIn();
});
$("a.aboutBtn").click(function() {
$("#watch").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#about").fadeIn();
});
$("a.filmmakersBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#filmmakers").fadeIn();
});
$("a.pressBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#press").fadeIn();
});
$("a.contactBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#contact").fadeIn();
});
});

If anyone can replicate this issue please let me know. All it takes is to refresh the page and click on the buttons for it not to work on my end. The site is having this issue even after I clear the cache and test it locally. In Dreamweaver it works exactly fine. The other odd thing is that the elements of the div load properly - such as link buttons that are png files with tags... so I know the divs are fading in but just not the backgrounds!

Thanks SO much!

DillonB
  • 179
  • 1
  • 3
  • 12
  • Unfortunately this is still an issue and I have no idea what's causing it. Perhaps I should use the Google Chrome support forum here? http://www.google.com/support/forum/p/Chrome?hl=en – DillonB Feb 29 '12 at 01:39
  • I'm experiencing a similar issue. Only seems to affect me, the developer, others haven't been able to reproduce it, seems to be something in my browser. Google Support threads: [0](http://www.google.com/support/forum/p/Chrome/thread?tid=77ad25a99d6655cd&hl=en) [1](http://www.google.com/support/forum/p/Chrome/thread?tid=1bf0c58a303e7612&hl=en) [2](http://www.google.com/support/forum/p/Chrome/thread?tid=0a55134ed7b9c7e6&hl=en) [3](http://www.google.com/support/forum/p/Chrome/thread?tid=77ad25a99d6655cd&hl=en) [4](http://www.google.com/support/forum/p/Chrome/thread?tid=564616e487b723c1&hl=en) – spatical Mar 08 '12 at 21:57
  • 1
    Thank you so much spatical. I do think that it's only an issue that affects our own browsers for some odd reason, as the only people I've had say they were affected were those people whom I was sending constant revisions to (when I would change the background image or whatnot). Perhaps Chrome has an issue with caching pages that are revised multiple times? So if a visitor only goes to the site once and then goes back it won't exhibit the same behavior as if constant page refreshes were being done? At least it's reassuring to know viewers won't see this *I hope!!!* – DillonB Apr 08 '12 at 02:20

1 Answers1

2

Update to the latest version of Chrome! I'm on Chrome 18.0.1025.162 and I am no longer experiencing the missing image issue. (assuming you've allowed Chrome to automatically update you'll probably already be up to date to this version).

spatical
  • 657
  • 4
  • 12