當父元素從絕對變爲固定時，在Firefox中發生錯誤變換轉換

Question

我已經環顧四周，但無法找到任何其他類似的東西。

正如標題所示，當父元素從絕對位置變爲固定位置（僅在Chrome中完全正常）時，我在變換轉換中出現奇怪的「故障」。

以爲我會把它扔在這裏以防萬一有人發現此問題的解決之前。

OS：OS X埃爾卡皮坦
火狐版本：51.0.1

Codepen：http://codepen.io/anon/pen/dNmJPK

HTML：

<div class="menu"> 
    <button id="btn-menu" type="button"> 
    <span class="menu-bars"></span> 
    </button> 
</div> 

SCSS：

#btn-menu { 
    position: absolute; 
    z-index: 100; 
    top: 50px; 
    right: 30px; 
    height: 49px; 
    width: 49px; 
    background-color: transparent; 
    padding-left: 0; 
    padding-right: 0; 
    cursor: pointer; 
    transition: .5s; 
    transform: translate(0, -50%); 
    border: 3px solid #000; 
    border-radius: 10px; 

    &:focus { 
    outline: none; 
    } 

    .menu-open & { 
    border-color: transparent; 
    position: fixed; 
    } 

    .menu-bars { 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
    width: 21px; 
    height: 3px; 
    background-color: #000; 
    transition: .3s; 

    &:before, &:after { 
     content: ""; 
     display: block; 
     position: absolute; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background-color: #000; 
     transition: .3s; 
    } 

    &:before { 
     top: -10px; 
     transform-origin: 0 0; 
    } 

    &:after { 
     bottom: -10px; 
     transform-origin: 0 100%; 
    } 

    .menu-open & { 
     background-color: transparent; 

     &:before { 
     top: -7px; 
     transform: rotate(45deg); 
     } 

     &:after { 
     bottom: -7px; 
     transform: rotate(-45deg); 
     } 
    } 
    } 
} 

JQuery的：

// Open/close menu 
$('#btn-menu').on('click', function() { 
    $('.menu').toggleClass('menu-open'); 
}); 

Answer 1

感謝@MichaelCoker提供了使用變換而不是頂部，底部的解決方案。請參閱下面的更新codepen。

http://codepen.io/anon/pen/xgWpQa

&:before { 
     transform: translate(0, -10px); 
    } 

    &:after { 
     transform: translate(0, 10px); 
    } 

    .menu-open & { 
     background-color: transparent; 

     &:before { 
      transform: rotate(45deg); 
     } 

     &:after { 
      transform: rotate(-45deg); 
     } 
    }