Question

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

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

请注意：您需要在chrome：// flags中激活“实验性Web平台功能”才能看到模糊效果。

这是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>

Answer 1

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

Chrome中的CSS背景滤镜模糊效果未对齐

1 个答案: