CSS背景滤镜模糊在滚动时出现奇怪的闪烁

Question

我有一个背景图片，想要添加背景模糊效果，但是如下图片所示，在滚动时会出现奇怪的闪烁。

Here is the code Css/Html:

.photoSection {
  max-height: 90vh;
  justify-content: center;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.absoluteHeaderPosition {
  padding-top: 57px;
}

.photoBackground {
  top: 0px;
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 100%;
  background-position: center;
}

.photoBackdrop {
  top: 0px;
  background: linear-gradient(180deg, rgba(31, 29, 33, 0.2) 0%, #1f1d21 100%);
  backdrop-filter: blur(180px);
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 100%;
}

.pictureContainer {
  align-items: center;
  margin: 80px;
  display: flex;
}

.content {
  height: 800px;
}

<div>
    <div class="photoSection absoluteHeaderPosition">
        <div class="photoBackground" style="background-image: url(https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500);"></div>
        <div class="photoBackdrop"></div>
        <div class="pictureContainer"><img src="https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" /></div>
    </div>
    <div class="content"></div>
</div>

- Xaos

---

我无法复现这个问题。 - Jack Lankford

我也不行。可能是机器特定的问题？我在Chrome和FF中都尝试过，没有闪烁。 - AStombaugh

Answer 1

我也有这个问题。在Safari上没有问题，但在Chrome（最新版本）上使用滚动条时会出现闪烁。我从未解决过它...

- tedem

---

如果你没有答案，我建议你给这个问题点赞并收藏它，而不是发布一个答案，因为它可能会在以后得到回答。 - Cédric