Un bogue complexe de Webkit? Position relative + Index Z + Débordement masqué + Transformation CSS3

Le code ( Aperçu JSFiddle ) ci-dessous produit des résultats inattendus dans Webkit par rapport aux autres navigateurs modernes:

 jQuery(document).ready(function($) { RunFunction(); $('.ColorSquare').click(function() { $('#Lightbox').css('display','block'); $('#ShowColorSquare').css('display','block'); $('#ShowColorSquare').css('z-index','10'); $('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width() / 2 - 50); $('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height() / 2 - 50); $('#ShowColorSquare').html('The color is: ' + $(this).css('background-color')); }); $('#ShowColorSquare').click(function() { $('#Lightbox').css('display','none'); $('#ShowColorSquare').css('display','none'); $('#ShowColorSquare').html(''); }); $('#Lightbox').click(function() { $('#Lightbox').css('display','none'); $('#ShowColorSquare').css('display','none'); $('#ShowColorSquare').html(''); }); }); function RunFunction() { $('#slide1').animate({ left: '-=310' }, 3000); $('#slide2').animate({ left: '-=310' }, 3000); $('#slide3').animate({ left: '-=310' }, 3000, function() { if($('#slide1').css("left") == '-310px') { $('#slide1').css("left",620); } if($('#slide2').css("left") == '-310px') { $('#slide2').css("left",620); } if($('#slide3').css("left") == '-310px') { $('#slide3').css("left",620); } RunFunction(); }); }   #Spin { width:50px; height:50px; margin: 15px 0px 15px 15px; background-color:#960; animation-name:Spin; animation-duration:5s; transform-origin:50% 50%; animation-iteration-count:infinite; -webkit-animation-name:Spin; -webkit-animation-duration:5s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count:infinite; } @keyframes Spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes Spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } .ColorSquare { height:100px; width:100px; position:absolute; } #ShowColorSquare { height:100px; width:100px; position:absolute; background-color:white; display:none; } #Lightbox { background-color:#000; width:100%; height:100%; position:fixed; top:0px; left:0px; opacity:.8; display:none; z-index:5; } .Panel { width:225px; height:250px; position:absolute; background-color:#6C6C6C; }  
 
 
 
 
Slide 1
 
 
 
 
 
 
 
Slide 2
 
 
 
 
 
 
 
Slide 3
 
 
 
 
 
 
 
 
 
 

Résultats attendus: 3 DIV (diapositives) sont supposées s’animer continuellement vers la gauche dans une boucle, y compris les zones colorées respectées des diapositives. Si vous cliquez sur une case colorée, une lightbox apparaît avec la couleur RBG de la case colorée cliquée dans la diapositive concernée. Cliquez à nouveau pour fermer la lightbox. Tout pendant qu’une transformation 3D est appliquée avant la DIV parent gris clair, avec une position relative avec un dépassement de capacité masqué, avec Jquery animate sur une DIV de positionnement absolu.

Résultats dans Webkit: les zones de couleur dans les diapositives ne semblent pas bouger / être rendues tant que vous n’avez pas redimensionné la fenêtre du navigateur sur un bureau, ou cliquez sur la poignée de redimensionnement du panneau JSFiddle (ou pincement / zoon) sur une tablette. Sur une note de débogage différente, si l’animation de transformation 3D n’est pas en boucle, l’animation s’arrête et les DIV s’affichent comme prévu.

Résultats de test montrant un bogue Webkit:

• détecter le support de transition css avec modernizr
• Faire en sorte que l’en-tête / la navigation change de couleur lorsque vous vous trouvez dans une autre section du site
• CSS Zoom to Fit hauteur et largeur (Stretch)
• Existe-t-il un sélecteur CSS standard similaire à: eq () dans jQuery?
• Animer une transformation CSS avec jQuery

• Win7 IE10: Pass
• Win7 Chrome: Pass
• Win7 FF: Pass
• Win7 Safari: échec
• Win8 IE11: Pass
• Android Chrome: échec
• iOS Safari: échec
• iOS Chrome: échec
• MacOS Safari: échec
• MacOS Chrome: échec

Avis ( Aperçu JSFiddle ) sans la transformation 3D, le code fonctionne, bien que l’animation ne soit pas fluide sur le bureau. La visionneuse fonctionne bien.

Avis ( Aperçu JSFiddle ) avec la transformation 3D après la DIV parent, l’animation est fluide et la visionneuse fonctionne bien.

Notice ( Aperçu JSFiddle ) avec -webkit-transform: rotation (0deg) appliquée à la DIV parent avec le débordement, l’animation est instable sur les tablettes, mais la transformation 3D peut exister avant la DIV parent ou dans la DIV de la diapositive. Un autre problème est créé cependant. Le dépassement de parent parent DIV a un indice z inférieur à celui de la lightbox, ce qui fait apparaître le DIV clair pour dark lightbox au-dessus de la boîte de dialog blanche DIV située dans le DIV parent.

Je sais que c’est un exemple très étrange, mais c’est un exemple dilué de code complexe plus privé. La transformation 3D doit être antérieure à la DIV parent ou dans une diapositive. La boîte de dialog de la lightbox doit se trouver dans la DIV ou la diapositive parent, mais doit apparaître au-dessus de la DIV sombre, qui ne peut pas être dans la DIV parent car le débordement masqué ne fera pas apparaître la DIV dans la lightbox noire en plein écran de navigateur.

Toute aide est appréciée.

• Panneau jQuery-mobile 1.3 toujours visible
• Comment synchroniser des événements d’animation CSS3 et des écouteurs d’événement avec jQuery
• Comment centrer l’image dans la division spécifique en fonction de la position actuelle de la fenêtre?
• IE nécessite un double clic avec un bouton personnalisé
• Largeur accélérée par le matériel CSS?