はChromeの問題を変更します

Question

固定ボタン（JSを使用）にwill-changeを追加すると、それは本当に不安定になります。これは 'will-change'ボタンとボタンなしの両方に適用されます。

問題を示し例：問題を示し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>