Question

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 $(window).load(function() but that doesn’t change anything.

Here’s the 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>

Thank you for any insight!

Answer 1

I have confirmed that this is the deal here: z-index not properly rendered on iPad and Google Chrome 22

Stacking contexts. In Chrome, “A stacking context is formed, anywhere in the document, by any element which is either

the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity)

”
In my case, the div#bg4-1 is inside a fixed div so that kills is ability to recede behind the entire page. Bullocks.