Проблема изменения воли в Chrome

Question

Я заметил, что когда я добавляю will-change на фиксированной кнопке (с использованием JS) она становится действительно прерывистой. Это относится как к кнопке "изменится", так и к кнопке без нее.

Пример, показывающий проблему: http://jsbin.com/kelajo/3/edit?html,css,js,output

GIF, который показывает проблему: http://i.imgur.com/sTSkvFA.gifv

Удалить will-change линия и обе кнопки начнут работать.

Это проблема Chrome или я что-то упустил? Спасибо.

Answer 1

На самом деле это не ответ, но мне нужно поделиться этим с миром:

У меня тоже были проблемы с will-change свойство, поэтому я читаю это: https://developer.mozilla.org/en/docs/Web/CSS/will-change Оказывается, это свойство следует использовать очень разумно:

Имейте в виду, что изменение воли может фактически влиять на внешний вид элементов

Вот моя проблема: в этом примере will-change свойство связывается со стековым контекстом (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>