'Css backdrop-filter blur weird flickering when scrolling

I have a background image and i am trying to add backdrop-filter blur, but as you can see on the pictures bellow when i scroll a weird flickering happened on the background.

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>

enter image description here

enter image description here

htmlcss


Solution 1:[1]

I have this problem too. While there is no problem in Safari, there is flickering with scroll on Chrome (latest). I have never solved it...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tedem

Related Questions