我注意到当我添加will-change
一个固定按钮(使用 JS)时,它变得非常不稳定。这适用于“将更改”按钮和没有它的按钮。
显示问题的示例:http: //jsbin.com/kelajo/3/edit ?html,css,js,output
显示问题的 GIF:http: //i.imgur.com/sTSkvFA.gifv
删除will-change
线,两个按钮将开始工作。
这是 Chrome 的问题,还是我遗漏了什么?谢谢你。
我注意到当我添加will-change
一个固定按钮(使用 JS)时,它变得非常不稳定。这适用于“将更改”按钮和没有它的按钮。
显示问题的示例:http: //jsbin.com/kelajo/3/edit ?html,css,js,output
显示问题的 GIF:http: //i.imgur.com/sTSkvFA.gifv
删除will-change
线,两个按钮将开始工作。
这是 Chrome 的问题,还是我遗漏了什么?谢谢你。
这实际上不是答案,但我需要与世界分享:
我也遇到了will-change
属性问题,所以我读了这个:https ://developer.mozilla.org/en/docs/Web/CSS/will-change
事实证明,应该非常明智地使用这个属性:
请注意,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>