css - 如何修复使用过渡变换或持续时间时 CSS 背景滤镜模糊消失的问题？ [仅限 Chrome ]

Question

简单代码笔:https://codepen.io/themanfromearth1/pen/WNRoyyW

使用 Slick Slider:https://codepen.io/maxbeat/pen/abNBrex

当您将 backdrop-filter blur 与父级中的 transition-duration 或 transform 结合使用时会发生错误。

父级:

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

子分区:

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

单击按钮时，CSS 模糊消失一秒钟，然后幻灯片再次模糊。

Chrome:问题

Firefox:有效(您必须先在 about:config 中启用背景过滤器)

Webkit/Safari:工作

编辑:对于这个问题，Chromium 上有一个确认的错误报告 https://bugs.chromium.org/p/chromium/issues/detail?id=1194050

Answer 1

在不使用翻译的情况下，您可以使用左侧定位。

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>