La position fixe ne fonctionne pas lorsque l'on utilise -webkit-transform

Question

J'utilise -webkit-transform (et -moz-transform / -o-transform) pour faire pivoter une div. J'ai également ajouté une position fixe pour que le div défile vers le bas avec l'utilisateur.

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

Answer 1

Après quelques recherches, il y a eu une rapport de bogue sur le Chrome à ce sujet, les navigateurs Webkit ne peuvent pas rendre ces deux effets en même temps.

Je suggérerais d'ajouter du CSS Webkit uniquement dans votre feuille de style et de faire de la div transformée une 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 */
  }
}

Pour l'instant, vous devrez donc procéder à l'ancienne, jusqu'à ce que les navigateurs Webkit rattrapent FF.

EDIT : En date du 24/10/2012, le bug n'a pas été résolu.

---

Il semble qu'il ne s'agisse pas d'un bogue, mais d'un aspect de la spécification dû au fait que les deux effets nécessitent des systèmes de coordonnées et des ordres d'empilement distincts. Comme expliqué dans cette réponse .

Answer 2

Une méthode (un peu bricolée) qui a fonctionné pour moi est la suivante position:sticky au lieu de cela :

.fixed {
     position: sticky;
}

Answer 3

Pour tous ceux qui constatent que leurs images d'arrière-plan disparaissent dans Chrome à cause du même problème avec background-attachment : fixed ; - voici la solution que j'ai trouvée :

// 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');

    });
}

Answer 4

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 pour valeur : transform : translate(0,0) ;. J'ai donc supprimé cette ligne, et tout a fonctionné comme prévu - position : fixed s'affiche 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émonstration : http://jsfiddle.net/ZWcD9/

Answer 5

Ajouter le -webkit-transform à l'élément fixe a résolu le problème pour moi.

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