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中的图标上，并注意视频元素在短时间内会变得更暗。

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

我做错了什么，或者这是Chrome中的错误？是否有其他方法可以为图标创建类似的行为（不影响视频）？

Answer 1

我遇到了同样的问题，但我设置了opacity属性而不是filter。我通过将transform-style: preserve-3d;添加到其不透明度发生变化的元素来修复它。

-webkit-filter和transition使Chrome中的视频元素更加微妙

1 个答案: