如何修复CSS背景滤镜模糊消失时使用过渡变换或持续时间？[铬]

Question

简单代码页：https://codepen.io/ThemanFromeArth1/Pen/WNROYYW

滑动条：https://codepen.io/maxbeat/pen/abnbrex

当您将背景滤镜模糊与父级中的过渡持续时间或转换组合在一起时，就会发生错误。

父分区：

.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模糊会消失一秒钟，然后幻灯片再次模糊。

铬：问题

Firefox：工作（您必须首先在about：config中启用backdrop-filter）

WebKit/Safari：正在工作

Answer 1

不使用translate,您可以使用left定位。

null

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>