Chrome 上的 will-change 问题答案

【问题标题】：will-change issue on ChromeChrome 上的 will-change 问题
【发布时间】：2016-05-30 12:27:37
【问题描述】：

我注意到，当我在固定按钮上添加will-change（使用 JS）时，它变得非常不稳定。这适用于“将更改”按钮和没有它的按钮。

显示问题的示例：http://jsbin.com/kelajo/3/edit?html,css,js,output

显示问题的 GIF：http://i.imgur.com/sTSkvFA.gifv

删除will-change 行，两个按钮都将开始工作。

这是 Chrome 问题，还是我遗漏了什么？谢谢。

【问题讨论】：

标签： javascript jquery css google-chrome will-change

【解决方案1】：

这实际上不是答案，但我需要与全世界分享：

我也遇到了will-change 属性的问题，所以我读到了这个：https://developer.mozilla.org/en/docs/Web/CSS/will-change 事实证明，应该非常明智地使用这个属性：

请注意，意志变化实际上可能会影响视觉效果元素的外观

这是我的问题：在此示例中，will-change 属性与 stacking-context 混淆（z-index 重叠元素）。第一个元素具有此属性，而其他元素则没有（悬停在绿色 div 内的深色 div 上）。当我尝试使用 will-change 时，我花了几个小时才发现我的代码出了什么问题

.will-change {
  will-change: opacity;  
}

.list {
  position: relative;
}
.list-element {
  position: relative;
  max-width: 500px;
  height: 80px;
  padding: 10px;
  margin-bottom: 10px;
  background: #308e74;
  opacity: 0.8;
}
.list-element:hover {
  opacity: 1;
}
.hover-el {
  position: relative;
  height: 30px;
  background: rgba(0, 0, 0, .3);
}
.hover-el:hover .show-on-hover {
  display: block;
}
.show-on-hover {
  display: none;
  position: absolute;
  width: 100px;
  height: 300px;
  background: #e6841e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  z-index: 100;
}

<div class="list">
  <div class="list-element will-change">
    <div class="hover-el">
      <div class="show-on-hover"></div>
    </div>
  </div>
  <div class="list-element">
    <div class="hover-el">
      <div class="show-on-hover"></div>
    </div>
  </div>
  <div class="list-element">
    <div class="hover-el">
      <div class="show-on-hover"></div>
    </div>
  </div>
</div>

【讨论】：