Positions fixes ne fonctionne pas lors de l’utilisation de -webkit-transform

J’utilise -webkit-transform (et -moz-transform / -o-transform) pour faire pivoter un div. De plus, la position est ajoutée pour que le div soit lu avec l’utilisateur.

Dans Firefox, cela fonctionne bien, mais dans les navigateurs Webkit, il est cassé. Après avoir utilisé -webkit-transform, la position fixe ne fonctionne plus! Comment est-ce possible?

Après quelques recherches, il y a eu un rapport de bogue sur le site Web de Chromium à ce sujet, jusqu’à présent les navigateurs Webkit ne peuvent pas rendre ces deux effets ensemble en même temps.

Je suggère d’append un peu de CSS Webkit uniquement dans votre feuille de style et de transformer l’image divisée en image et de l’utiliser comme arrière-plan.

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit-specific CSS here (Chrome and Safari) */ #transformed_div { /* styles here, background image etc */ } } 

Donc, pour l’instant, vous devrez le faire à l’ancienne, jusqu’à ce que les navigateurs Webkit rattrapent FF.

EDIT: Au 10/24/2012, le bogue n’a pas été résolu.


Cela ne semble pas être un bogue, mais un aspect de la spécification en raison des deux effets nécessitant des systèmes de coordonnées séparés et des ordres d’emstackment. Comme expliqué dans cette réponse .

La spécification CSS Transforms explique ce comportement. Les éléments avec transformations agissent comme un bloc conteneur pour les descendants à position fixe, donc la position: fixed sous quelque chose avec une transformation n’a plus de comportement fixe.

Ils fonctionnent lorsqu’ils sont appliqués au même élément; l’élément sera positionné comme fixe, puis transformé.

Pour quiconque trouve que ses images d’arrière-plan disparaissent dans Chrome à cause du même problème avec l’attachement d’arrière-plan: corrigé; – c’était ma solution:

 // run js if Chrome is being used if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { // set background-attachment back to the default of 'scroll' $('.imagebg').css('background-attachment', 'scroll'); // move the background-position according to the div's y position $(window).scroll(function(){ scrollTop = $(window).scrollTop(); photoTop = $('.imagebg').offset().top; distance = (photoTop - scrollTop); $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px'); }); } 

Août 2016 et position fixe et animation / transformation est toujours un problème. La seule solution qui a fonctionné pour moi était de créer une animation pour l’élément enfant qui prend plus de temps.

Quelque chose (un peu pirate) qui a fonctionné pour moi est de se position:sticky place:

 .fixed { position: sticky; } 

En fait, j’ai trouvé un autre moyen de corriger ce “bug”:

J’ai un élément conteneur qui contient une page avec des animations css3. Lorsque la page a terminé l’animation, la propriété css3 a la valeur: transform: translate (0,0) ;. Donc, je viens de supprimer cette ligne, et tout a fonctionné comme il se doit – position: fixe est affiché correctement. Lorsque la classe css est appliquée pour traduire la page, la propriété translate est ajoutée et l’animation css3 fonctionne également.

Exemple:

 .page { top: 50px; position: absolute; transition: ease 0.6s all; /* -webkit-transform: translate(0, 0); */ /* transform: translate(0,0); */ } .page.hide { -webkit-transform: translate(100%, 0); transform: translate(-100%, 0); } 

Démo: http://jsfiddle.net/ZWcD9/

L’ajout de -webkit-transform à l’élément fixe a résolu le problème pour moi.

 .fixed_element { -webkit-transform: translateZ(0); position: fixed; .... } 

sur mon projet phonegap, la transformation webkit -webkit-transform: translateZ (0); travaillé comme un charme. Il travaillait déjà dans chrome et safari, mais pas dans le navigateur mobile. il peut aussi y avoir un autre problème est que WRAPPER DIVs ne sont pas terminés dans certains cas. nous appliquons la classe clear en cas de DIV flottante.

 
.Clear, .Clearfix{clear:both;}

Probablement dû à un bogue dans Chrome, comme je ne peux pas le répliquer dans Safari ou Firefox, mais cela fonctionne dans Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

C’est une structure très particulière, donc ce n’est en aucun cas un correctif CSS universel, mais peut-être que quelqu’un peut le modifier pour le faire fonctionner dans Safari et Firefox.

Voici ce qui fonctionne pour moi sur tous les navigateurs et appareils mobiles testés (Chrome, IE, Firefox, Safari, iPad, iPhone 5 et 6, Android).

 img.ui-li-thumb { position: absolute; left: 1px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 

la position fixe d’un élément est brisée si vous appliquez la transformation à un ancêtre.

 
...
//ok
...
// broken

Si vous pouvez utiliser javascript comme une option, cela peut être une solution de contournement pour positionner un élément fixe position sur la fenêtre quand il se trouve dans un élément transformé:

  let fixedEl // some node that you is position // fixed inside of an element that has a transform const rect = fixedEl.getBoundingClientRect() const distanceFromWindowTop = rect.top const distanceFromWindwoLeft = rect.left let top = fixedEl.offsetTop let left = fixedEl.offsetLeft if(distanceFromWindowTop !== relativeTop) { top = -distanceFromWindowTop fixedEl.style.top = `${top}px` } if(distanceFromWindowLeft !== relativeLeft) { left = -distanceFromWindowLeft fixedEl.style.left = `${left}px` } 

Certes, vous devrez également ajuster votre hauteur et votre largeur, car fixedEl calculera avec avec son conteneur. Cela dépend de votre cas d’utilisation, mais cela vous permettra de définir de manière prévisible la position de quelque chose, quel que soit son conteneur.

S’il vous plaît ne pas voter, car ce n’est pas une réponse exacte, mais pourrait aider quelqu’un parce que c’est un moyen rapide juste pour désactiver la transformation. Si vous n’avez pas vraiment besoin de la transformation sur le parent et que vous souhaitez que votre position fixe fonctionne à nouveau:

 #element_with_transform { -webkit-transform: none; transform: none; } 

Ajoutez une classe dynamic pendant que l’élément est transformé. $('#elementId').addClass('transformed') . Puis continuez à déclarer en css,

 .translatX(@x) { -webkit-transform: translateX(@X); transform: translateX(@x); //All other subsidaries as -moz-transform, -o-transform and -ms-transform } 

puis

 #elementId { -webkit-transform: none; transform: none; } 

puis

 .transformed { #elementId { .translateX(@neededValue); } } 

Maintenant position: corrigé lorsqu’il est fourni avec une propriété top et z-index sur un élément enfant fonctionne correctement et rest fixe jusqu’à ce que l’élément parent se transforme. Lorsque la transformation est annulée, l’élément enfant apparaît à nouveau comme fixe. Cela devrait faciliter la situation si vous utilisez une barre latérale de navigation qui s’ouvre et se ferme après un clic, et vous avez un ensemble de tabulations qui doit restr collant lorsque vous faites défiler la page.