will-change issue on Chrome

Question

I noticed that when I add will-change on a fixed button (using JS), it gets really choppy. This applies to both the 'will-change' button and the button without it.

Example that shows the issue: http://jsbin.com/kelajo/3/edit?html,css,js,output

GIF that shows the issue: http://i.imgur.com/sTSkvFA.gifv

Remove the will-change line and both buttons will start working.

Is this a Chrome issue, or am I missing anything? Thank you.

Answer 1

This actually isn't the answer but I need to share it with the world:

I also had issues with will-change property, so i read this: https://developer.mozilla.org/en/docs/Web/CSS/will-change It turns out, this property should be used very wisely:

Be aware, that will-change may actually influence the visual appearance of elements

Here is my problem: In this example, will-change property is messing with stacking-context (z-index overlapping elements). First element has this property and others don't (hover on dark div inside green div). It took me few hours to find out what was wrong with my code when i was trying to be fancy using 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>