Jquery .css Not Working Only In Chrome

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 t

Solution 1:

Yeah thats the same reason of this answer. Your method has no effect on non-positioned elements, that is, the element must be either absolutely positioned, relatively positioned, or fixed.

<script>
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                autoHeight: false,
                active: false
            });
            $(document).ready(function() {
                 $("#bg4-1").css("display","none");
                $(".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");
                       $("#bg4-1").css("display","none");
                    } elseif ($("section#bubble").css("display") === "block") {
                         $("#bg4-1").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");
            });
        });

Just change these lines its working fine in my chrome check it out. You can refer My blog to know more about these problems. i am writing an article in it

Solution 2:

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 az-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.