Übergang Glitchy-Transformation in Firefox, wenn sich das Elternelement von absolut zu fest ändert

Question

Ich habe mich umgesehen, konnte aber niemanden finden, der etwas Ähnliches erlebt.

Wie der Titel sagt, bekomme ich einen seltsamen "Glitch" in einem Transform-Übergang, wenn das Eltern-Element NUR in Firefox von absolut auf fix positioniert wird (sieht in Chrome ganz gut aus).

Ich dachte, ich würde es hier reinwerfen für den Fall, dass jemand eine Lösung für dieses Problem gefunden hat.

OS: OS X El Capitan
Firefox Version: 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

Vielen Dank an @MichaelCoker für die Lösung der Verwendung von Transformationen anstelle von oben, unten. Siehe aktualisierten CodePen unten.

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); 
     } 
    }