jQuery .css not working only in Chrome

[tntboom]

In contradiction to many posts here, my script below works well in Safari and Firefox but not in Chrome. The div "#bg-4-1" is supposed to load with the page at a z-index of -1000 then, when "h3#bubbleh3" is clicked (I know, the naming got out of hand), the z-index shifts to 4. This works brilliantly everywhere else. I've wrapping the entire thing in \[code\]$(window).load(function()\[/code\] but that doesn't change anything. Here's the code:\[code\] <script> $(function() { $( "#accordion" ).accordion({ collapsible: true, autoHeight: false, active: false }); $(document).ready(function() { $(".ui-accordion").bind("accordionchange", function(event, ui) { if ($(ui.newHeader).offset() != null) { ui.newHeader, // $ object, activated header $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-0}, 500); } }); }); $("h3#bubbleh3").on("click", function(event, ui) { setTimeout(function() { if ($("section#bubble").css("display") === "none") { $("#bg4-1").css("z-index", "-1000"); } else if ($("section#bubble").css("display") === "block") { $("#bg4-1").css("z-index", "4"); } }, 350); }); $("h3#mermaidh3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); $("h3#thingstellh3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); $("h3#sumpartsh3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); $("h3#knivesh3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); $("h3#redgreenh3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); $("h3#resurrecth3").on("click", function(event, ui) { $("#bg4-1").css("z-index", "-1000"); }); }); </script>\[/code\]Thank you for any insight!