Question

Firefox中的官方slideout.js demo不会抽搐。

在Firefox中打开我的demo on Codepen
打开菜单
关闭菜单
看到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; */
}

转换Firefox中的错误？

1 个答案: