Firefoxのバグを修正しますか？

Question

Firefoxの公式slideout.js demoはつまらないです。

2. 私demo on Codepenオープンメニュー
3. Firefoxの
で
4. 近いメニューを開くには、main container痙攣ことを確認 - このバグを修正する方法？

は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

この問題は、お客様のwill-change属性に関連しているように見えます。これは、開発者コンソールにこの警告を追加しています。

ウィル変化メモリ消費量が高すぎます。予算の上限は、文書の表面積に3を掛けたもの（186813 px）です。予算を超えて変更が発生することは無視されます。私が閾値よりも小さいサイズを変更する場合

、それが動作します。そうでなければ、それはしません。それを修正するためには、唯一の解決策は、CSSのプロパティを削除することです。

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