CSS 背景滤镜模糊效果在 Chrome 中未对齐答案

【问题标题】：CSS backdrop-filter blur effect misaligned in ChromeCSS 背景滤镜模糊效果在 Chrome 中未对齐
【发布时间】：2019-12-08 18:16:05
【问题描述】：

我有一个固定高度的父 div，以及一个延伸到父 div 之外的子 div。在 Chrome 75 中，这会导致父 div 的背景滤镜效果被应用到预期区域之外。 IOS/Safari 不会发生这种情况。

试试看：https://jsfiddle.net/7grL6t0n/

Firefox 或 Edge 根本不支持背景过滤器。不确定其他平台/浏览器。

请注意：您需要在 chrome://flags 中激活“Experimental Web Platform features”才能看到模糊效果。

这是 Chrome 错误还是我做错了什么。如果它是一个错误，是否有针对此问题的一些 CSS 解决方法？

body {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/USAF-1951.svg/1024px-USAF-1951.svg.png);
}

.parent {
  background-color: rgba(255, 0, 0, 0.5);
  height: 100px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.child {
  background-color: rgba(0, 255, 0, 0.5);
  width: 300px;
  height: 300px;
}

<body>
  <div class="parent">
    Parent with fixed height, red background and "blur" backdrop filter, which should appear within the parent, but is moved down by the child.
    <div class="child">
      Child with green background, extending outsite of parent.
    </div>
  </div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

这是 Chrome 75 中的一个错误。背景滤镜功能已在 Chrome 76 中正式推出，并且此错误（以及许多其他错误）已在 76 版本中得到修复。

【讨论】：