css3 transform posizione di ripristino: fisso

Question

Quando si utilizza un css3 transform(), position: fixed non si applica. Ho creato un jsFiddle completamente funzionante che mostra il problema: http://jsfiddle.net/SR5ka/

Prima scorrere verso il basso, notare che la barra laterale sinistra rimane fissa. Ora, fai clic su expand e scorri verso il basso, nota che la barra laterale sinistra è ora non corretta.

Qualche idea se esiste una correzione nativa per questo?

Answer 1

È possibile utilizzare un lavoro intorno a like this one. Implica la commutazione di un valore sinistro (tramite una classe) sia per l'elemento fisso che per il contenitore.

.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 */ 
} 

Con una piccola quantità di JS vaniglia per alternare esso classe:

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

Answer 2

Secondo questa risposta: https://stackoverflow.com/a/15251226/125264 Questo problema può essere risolto aggiungendo fittizio -webkit-trasformazione per l'elemento che deve essere risolto Ha funzionato per me

Modifica 04,2016

Sembra che non funziona più.