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

Question

Edit: This bug has been fixed by Chromium some time ago

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

Answer 1

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;
}

<div class="container">
  <div class="slider" id="slider">
    <div class="slider__item">1</div>
    <div class="slider__item">2</div>
    <div class="slider__item">3</div>
    <div class="slider__item">4</div>
    <div class="slider__item">5</div>
  </div>
  
</div> 
<div class="button">
  
   <button type="button"  onclick="translate3d()">Click to transform translate3d</button>
</div>
<div>