css3変換の位置が固定されています

Question

css3 transform()を使用する場合、position: fixedは適用されません。問題を示すjsFiddleを完全に作った：http://jsfiddle.net/SR5ka/

最初にスクロールして、左側のサイドバーが固定されたままであることに注意してください。今度はexpandをクリックし、下にスクロールして、左側のサイドバーがではなく、に固定されていることに注意してください。

これにネイティブCSS修正がある場合、どんな考えですか？

Answer 1

like this oneを回避することができます。これは、固定要素とコンテナの両方について、左の値を（クラスを介して）トグルすることを含む。それにクラスを切り替えるバニラJS少量の

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

：

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

Answer 2

この回答によると：https://stackoverflow.com/a/15251226/125264 この問題は、どの要素にダミー-webkit-変換を追加することによって固定することができます。修正する必要があります。私のために働いた。もう動作しないよう

編集04.2016

が見えます。