Transform bug in Firefox?

Question

Official slideout.js demo in Firefox does not twitches.

1. open my demo on Codepen in Firefox
2. open menu
3. close menu
4. see that the main container twitches - how to fix this bug?

JavaScript:

var slideout = new Slideout({
  'panel': document.getElementById('main'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 50
});

document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
  slideout.toggle();
});

document.querySelector('.menu').addEventListener('click', function(eve) {
  if (eve.target.nodeName === 'A') { slideout.close(); }
});

/*
slideout.on('beforeopen', function() {  document.querySelector('.fixed').classList.add('fixed-open'); });
slideout.on('beforeclose', function() {  document.querySelector('.fixed').classList.remove('fixed-open'); });
*/

CSS:

.slideout-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 256px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
}
.slideout-panel {
    position:relative;
    z-index: 1;
    will-change: transform;
}
.slideout-open{
    overflow: hidden;
}
.slideout-open body{
    overflow: hidden;
}
.slideout-open .slideout-panel {
    overflow: hidden;
}
.slideout-open .slideout-menu {
    display: block;
}




.btn {
  display:inline-block;
  height:50px;
    width:50px;
    background-color:blue;
    color:#fff;
  cursor:pointer;
}
.header1,.header2 {
    width:100%;
    height:50px;
  line-height:50px;
    opacity:0.5;
}
.header1 {
    background-color:green;
    position:fixed;
    top:0;
    z-index:5;
}
.header2 {
    background-color:red;
}
.fixed {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    position:relative;
    z-index:2;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
.fixed-open {
    -webkit-transform:translate3d(256px,0,0);
    -moz-transform:translate3d(256px,0,0);
    -ms-transform:translate3d(256px,0,0);
    -o-transform:translate3d(256px,0,0);
    transform:translate3d(256px,0,0);
}
.menu {
    color:#fff;
    background-color:darkblue;
 margin:50px 0 0;
}
.panel {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:block;
    width:100%;
    min-height: 100%;
    font-size:30px;
    font-weight:700;
    background-color:lightblue;
}



*{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0,0,0,0);
    outline: 0;
}
body {
    width: 100%;
    height: 100%;
    margin:0;
}

HTML:

<h1 style="height:30px;margin:10px 60px;">Title</h1>

<header class="header1">
  <div class="btn js-slideout-toggle">menu</div>
</header>
<!--
<div class="header2 fixed">
  first div (transform)
  <a href="https://mango.github.io/slideout/" target="_blank">slideout.js</a>
</div>
-->
<main id="main" class="panel">main container
<br/><br/><br/><br/><br/><br/><br/><br/>1 
<br/><br/><br/><br/><br/><br/><br/><br/>2 
<br/><br/><br/><br/><br/><br/><br/><br/>3 
<br/><br/><br/><br/><br/><br/><br/><br/>end
</main>

<aside id="menu" class="menu">main menu
<br/><br/><br/><br/><br/><br/><br/><br/>1 
<br/><br/><br/><br/><br/><br/><br/><br/>2 
<br/><br/><br/><br/><br/><br/><br/><br/>3 
<br/><br/><br/><br/><br/><br/><br/><br/>4 
<br/><br/><br/><br/><br/><br/><br/><br/>5 
<br/><br/><br/><br/><br/><br/><br/><br/>end
</aside>

Answer 1

The issue appears to be related to your will-change attribute, which is adding this warning to my developer console.

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (186813 px). Occurrences of will-change over the budget will be ignored.

When I resize it smaller than the threshold, it work. Otherwise, it does not. As for fixing it, it appears the only solution is to remove the CSS property.

.slideout-panel {
    position:relative;
    z-index: 1;
/*  will-change: transform; */
}