-webkit-filterとtransitionを使用すると、Chromeでビデオ要素が薄くなる

Question

私は、CSSフィルタ（-webkit-filter）を使って遷移し、いくつかのSVGアイコンの上を移動するときにその明るさと不透明度を変更します。これは、アイコン上で期待どおりに機能しますが、遷移中にページ上のビデオ要素を軽くします。私がトランジションを削除すると、ビデオはフリ만されません。

HTML：：

<div class="icon"></div> 
<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls> 
    Your browser does not support the <code>video</code> element. 
</video> 

CSS：

.icon { 
    background: url("https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg") no-repeat center; 
    height: 50px; 
    width: 50px; 
    background-size: 50px; 
} 

.icon:hover { 
    -webkit-filter: opacity(.5); 
    transition: all .5s ease; 
} 

、行動に問題を参照してくださいthis JSFiddleにアイコンの上にカーソルを置くと、ビデオ要素が取得する方法を気づくためにここにコードの関連するビットです少し暗い。

問題はGoogle Chromeで発生しているようです（バージョン：51.0.2704.106、64ビット、更新：バージョン：52.0.2743.116と同じ結果）。

何か間違っているのですか、これはChromeのバグですか？ （ビデオに影響を与えずに）アイコンの同様の動作を作成する別の方法はありますか？

Answer 1

私は同じ問題がありましたが、filterではなくopacityプロパティを設定していました。不透明度を変更した要素にtransform-style: preserve-3d;を追加して修正しました。