Transform Bug in Firefox?

Question

Offizielle slideout.js demo in Firefox zuckt nicht.

1. öffne meine demo on Codepen in Firefox
2. Menü öffnen
3. Menü schließen
4. sehen, dass die main container Zuckungen - , wie diese Fehler zu beheben?

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

Das Problem scheint mit Ihrem will-change-Attribut in Verbindung zu stehen, das diese Warnung meiner Entwicklerkonsole hinzufügt.

Wird der Speicherverbrauch zu hoch geändert? Budgetlimit ist die Dokumentfläche multipliziert mit 3 (186813 px). Vorkommen von Willensänderungen gegenüber dem Budget werden ignoriert.

Wenn ich es verkleinern kleiner als der Schwellenwert, funktioniert es. Sonst nicht. Wie es zu beheben scheint, ist die einzige Lösung, die CSS-Eigenschaft zu entfernen.

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