jQuery .css not working only in Chrome

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!

.parallax-bg4 {position: fixed; } #bg4-1 { position: absolute; z-index: -1000; } where the first div contains the second. — onomiko
– onomiko, Commented Dec 12, 2012 at 0:46
I'm also trying to add styling inline: <div id="bg4-1" style="position:absolute;"><iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe></div> but an unable to get the "hide" portion of the javascript to work in Chrome. — onomiko
– onomiko, Commented Dec 12, 2012 at 0:54

Community · Accepted Answer · 2017-05-23 12:20:26Z

3

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");
                    } else if ($("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

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Dec 11, 2012 at 7:04

Vivek Dragon

2,2485 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

onomiko Over a year ago

Thank you Vivek and thank you for writing out the solution as I would have been working out where to place what for a while. Question: #bg4-1 is absolutely positioned within a fixed div via the css. I tried your solution without altering the css but nothing changed. I then removed the absolute positioning in the css and got partial results (the div was hidden on load but wouldn't return to being hidden). Thoughts?

onomiko Over a year ago

And thank you for the link. I'd somehow missed that one in all the research.

onomiko Over a year ago

Did you have any thoughts on why it isn't working based on the extra info I've added here? (I hope)

Vivek Dragon Over a year ago

I am glad to help post your code in a JSBIN and i will look at it

onomiko Over a year ago

...I wasn't sure what else to do with that jsbin site so I pasted all my code in there. I'm sure that's overkill. Can you see it here? jsbin.com/eyesiq/1/edit It works fine, except in Chrome. Look for the Spotify playlist that appears when you click "The Bubble Creatures". Otherwise, the important bits are here on this SO thread. Thanks again. This is kind of you to take the time.

|

Community · Accepted Answer · 2017-05-23 11:43:29Z

0

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.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Dec 12, 2012 at 6:34

onomiko

391 silver badge7 bronze badges

1 Comment

JosephK Over a year ago

Note that this bug also breaks other css, such as margin-top, top, and who knows what else. Welcome to Micooglesoft World. @onomiko Thanks for coming back with that answer.

Collectives™ on Stack Overflow

jQuery .css not working only in Chrome

2 Answers 2

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related