web-dev-qa-db-fra.com

la transformation css3 rétablit la position: corrigé

Lors de l'utilisation d'un css3 transform(), position: fixed Ne s'applique pas. J'ai fait un jsFiddle entièrement fonctionnel montrant le problème: http://jsfiddle.net/SR5ka/

Faites d'abord défiler vers le bas, notez que la barre latérale gauche reste fixe. Maintenant, cliquez sur expand, et faites défiler vers le bas, notez que la barre latérale gauche est maintenant non corrigée.

Une idée s'il existe un correctif CSS natif pour cela?

csscss-transforms
23
Justin

Vous pouvez utiliser un travail autour de comme celui-ci . Cela implique de basculer une valeur à gauche (via une classe) à la fois pour l'élément fixe et le conteneur.

.global-wrapper {
    position: relative;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.global-wrapper.expanded,
.global-wrapper.expanded .navbar {
    left: 200px;
}
.navbar {
    -webkit-transition: 300ms;
    transition: 300ms;
    position: fixed;
    width: 100px;
    height: 100%;
    top: 0px;
    left: 0px;
}
.content {
    position: relative;
    width: calc(100% - 170px); /* 100% - width of left bar plus margin */
}

Avec une petite quantité de Vanilla JS pour faire basculer la classe:

var wrapper = document.querySelector(".global-wrapper");
document.getElementById("expand").onclick = function() {
        wrapper.classList.toggle("expanded");
}
4
Zach Saucier

Selon cette réponse: https://stackoverflow.com/a/15251226/125264 Ce problème peut être résolu en ajoutant dummy -webkit-transform à l'élément qui doit être corrigé. A travaillé pour moi.

Modifier 04.2016

On dirait que ça ne marche plus.

3
Wiseman