-webkit过滤器和过渡使Chrome中的视频元素flim

Question

我使用CSS过滤器（-webkit过滤器）与过渡，以改变一些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将鼠标悬停在图标，并注意视频元素如何得到一会儿就会变暗一点。

这个问题似乎只发生在谷歌浏览器（我在版本：51.0.2704.106,64位，更新：相同的结果在版本：52.0.2743.116）。

我做错了什么或者这是Chrome中的错误？是否有另一种方式为图标创建类似的行为（不影响视频）？

Answer 1

我有同样的问题，但我设置opacity属性而不是filter。我通过将transform-style: preserve-3d;添加到不透明度已更改的元素来修复它。