jQuery .css ne fonctionne pas uniquement dans Chrome

Contrairement à de nombreux articles, mon script ci-dessous fonctionne bien dans Safari et Firefox, mais pas dans Chrome. La div “# bg-4-1” est censée se charger avec la page à un z-index de -1000 puis, quand “h3 # bubbleh3” est cliqué (je sais que le nom est devenu incontrôlable), index passe à 4.

Cela fonctionne avec brio partout ailleurs. J’ai emballé le tout dans $(window).load(function() mais cela ne change rien.

Voici le code:

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

Merci pour toute idée!

Ouais c’est la même raison de cette réponse . Votre méthode n’a aucun effet sur les éléments non positionnés, c’est-à-dire que l’élément doit être absolument positionné, relatif ou fixe.

   

Il suffit de changer ces lignes pour que cela fonctionne correctement dans mon chrome. Vous pouvez vous référer à mon blog pour en savoir plus sur ces problèmes. j'écris un article dedans

J’ai confirmé qu’il s’agissait de la bonne affaire: z-index mal rendu sur iPad et Google Chrome 22

Contextes d’emstackment. Dans Chrome, “Un contexte de superposition est formé, n’importe où dans le document, par tout élément

 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) 

“Dans mon cas, la div # bg4-1 est dans une div fixe, ce qui tue est la capacité de s’écrouler derrière la page entière. Bullocks.