Chrome中带backdrop-filter:blur的元素覆盖HTML5视频时视频变暗求助

问题描述 #

在全屏HTML5视频上方添加带有毛玻璃效果的UI栏，使用backdrop-filter: blur()实现后，启用该效果时下方视频会略微变暗。仅Chrome浏览器存在此问题，Safari表现正常；图片、纯色背景场景下无此问题，MP4、WebM格式视频均会出现该情况。

示例代码 #

HTML #

<video muted>
  <source src="视频地址" type="video/mp4">
</video>
<div>
  <a href="#" id="button">toggle opacity of backdrop-filter:blur(15px) block</a>
</div>

CSS #

video {
  width:100vw;
}

div {
  position: absolute;
  top:200px;
  right:300px;
  border:1px solid red;
}

#button {
  color: #fff; 
  backdrop-filter: blur(15px);
  padding:20px;
  display:block;
  &.hide {
    opacity:0;
  }
}

解决方案 #

方法1：给视频开启硬件加速 #

给视频元素添加transform: translateZ(0)，强制浏览器使用硬件加速渲染视频，解决层叠渲染导致的颜色异常：

video {
  width: 100vw;
  transform: translateZ(0);
}

方法2：使用will-change触发硬件加速 #

另一种触发硬件加速的方式是给视频元素添加will-change: transform，告知浏览器该元素会有变换操作，提前启用硬件加速：

video {
  width: 100vw;
  will-change: transform;
}

方法3：给毛玻璃元素添加透明背景色 #

部分场景下，给带有backdrop-filter的元素添加极低透明度的背景色，也能修复渲染异常：

#button {
  color: #fff; 
  backdrop-filter: blur(15px);
  background-color: rgba(255, 255, 255, 0.01); /* 添加极低透明度背景 */
  padding:20px;
  display:block;
  &.hide {
    opacity:0;
  }
}

原因说明 #

Chrome中backdrop-filter的渲染机制与视频的默认渲染层存在冲突，导致视频颜色被意外过滤变暗。通过开启视频的硬件加速，让视频和毛玻璃元素处于同一渲染层级，即可避免该问题。

内容的提问来源于stack exchange，提问作者Colin