How to fix CSS backdrop-filter blur disappearing when using transition-transform or duration? [Chrome only]

Question

Simple Codepen: https://codepen.io/themanfromearth1/pen/WNRoyyW

With Slick Slider: https://codepen.io/maxbeat/pen/abNBrex

The error happens when you combine backdrop-filter blur with either transition-duration or transform in the parent.

Parent Div:

.slider {
  transition-duration: 300ms; /** One of those two is enough **/
  transition: transform 0.3s; /** But with either the bug occurs **/

  transform: translate3d(-100px, 0, 0);
}

Child Div:

.slider__item {
  background: rgba(206, 206, 206, 0.15);
  backdrop-filter: blur(89px);
}

When you click the button, the CSS blur disappears for a second and then the slide is blurred again.

Chrome: Problem

Firefox: Works (you have to enable backdrop-filter first in about:config)

Webkit/Safari: Working

Edit: There is a confirmed bug-report on Chromium for this problem https://bugs.chromium.org/p/chromium/issues/detail?id=1194050

user_7453857 · Answer

Without using translate you can use positioning with left.

let translated = false

function translate3d() {
  const div2 = document.getElementById("slider")
 if (!translated) {
    div2.style.left = '100px';
 } else {
   div2.style.left = '400px';
 }

    translated = !translated;
}

.slider {
  display: flex;
   align-items: center;
  justify-content: center;
  position: relative;
  left: 400px;
  
  /** Remove duration and blur works **/
  transition-duration: 300ms; 
  /** Also disappears if you transform like this **/
  /**  transition: transform 0.3s **/
  
}

.slider__item {
  height: 100px;
  width: 100px;
  background: rgba(206, 206, 206, 0.15);
  backdrop-filter: blur(89px)!important;
   margin: 6px;
  margin-top: 200px;
}

.container {
  height: 1900px;
  width: 899px;
  background-image:url(https://images.unsplash.com/photo-1616604745302-60a195c7061a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1401&q=80);
  
}

.button {
  position:absolute;
  top: 350px;
  left: 400px;
}

user_13938363 · Answer

It's a bug !
I've encountered it myself while I was building my own portfolio.
The way I've solved it was by using an API for smooth scrolling that I wrote which is available here: https://github.com/CristianDavideConte/universalSmoothScroll
Basically the solution is: don't use translate and backdrop-filter:blur together, just make the parent container scrollable and smoothly scroll it whenever you need it.

I've rewrote your slider example so that it correctly works with the API:

const maxSlide = 5;
const minSlide = 1;
const visibleSlides = 3;
let numSlide = 0;

function init() {
  let leftArrow = document.getElementById('left-arrow');
  let rightArrow = document.getElementById('right-arrow');
  let slider = document.getElementsByClassName('slider')[0];
  let slides = slider.children;    

  leftArrow.onclick = (e) => {
    e.preventDefault();
    if(numSlide > minSlide - 1) {
      numSlide--;
      uss.scrollIntoView(slides[numSlide], true, null, null, true);
    }
  }

  rightArrow.onclick = (e) => {
    e.preventDefault();    
    if(numSlide < maxSlide - visibleSlides) {
      numSlide++;
      uss.scrollIntoView(slides[numSlide], true, null, null, true);
    }
  }

  /* We apply an ease function to make it look pretty */
  let whateverEaseFunctionYouLike = remaning => {return remaning / 15 + 1;};
  uss.setXStepLengthCalculator(whateverEaseFunctionYouLike, slider);
}

* {
    padding: 0;
    margin: 0;
  }
  
body {
  height: 100vh;
  overflow: hidden;
  background: url(https://img.wallpapersafari.com/desktop/1366/768/66/57/D2uNEj.jpg) no-repeat; /* Moved from container */
  background-size: cover; /* Moved from container  */
}

.container {
  width: 100vw; /* Added */
  display: flex; /*Added */
  height: 200px; /* Moved from slider__item */
  /*height: 100%; Removed */
  /*padding: 60px; Removed */
}

.slider {
  width: 80%; /* Changed */
  height: 100%; /* Added */
  position: relative;
  display:flex; /* Added */
  overflow: hidden; /* Added */
  /*margin-bottom: 60px; Removed*/
}

.slick-list {
  overflow: hidden;
}

.slick-track {
  display: flex;
}

.slider__item {
  width: calc(74vw / 3); /* Added */
  height: 80%; /* Added */
  flex-shrink: 0; /* Added */
  margin: auto 1vw; /* Changed */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 24px arial;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
}

.slick-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.slick-dots li {
  background: #fff;
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
  list-style:none
}

.slick-dots li.slick-active {
  background: #000;
}

.slick-dots li button {
  font-size: 0;
  border: none;
  opacity: 0;
}

.slick-arrow {
  font-size: 0;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  /*transform: rotate(-45deg); Moved */
  /*position: absolute; Removed */
  margin: auto; /* Added */
  top: 100px;
  cursor: pointer;
}

.slick-next {
  transform: rotate(135deg);
  right: -30px;
}

.slick-prev {
  left: -30px;
}

#left-arrow {
  transform: rotate(-45deg); /* Moved from slick-arrow*/
}

#right-arrow {
  transform: rotate(135deg); /* Moved from slick-arrow and then changed */
}

The advantage of this aproach is that you can customize the scrolling related part of your slider just as much as you did with "slick-slider".
If you need one more example of a carousel built with this API you can take a look at here: https://cristiandavideconte.github.io/myPersonalWebPage/#home

How to fix CSS backdrop-filter blur disappearing when using transition-transform or duration? [Chrome only]

2 Answers