如何修复 CSS backdrop-filter 模糊在使用 transition-transform 或持续时间时消失？ [Chrome 仅]

Question

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

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

当您将 backdrop-filter 模糊与 transition-duration 或 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);
}

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

Chrome: 问题

Firefox：有效（您必须先在 about:config 中启用 backdrop-filter）

Webkit/Safari：工作

编辑： Chromium 上已确认 bug-report 这个问题 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>

Answer 2

这是一个错误！
我在建立自己的投资组合时自己也遇到过。
我解决它的方法是使用我写的 API 进行平滑滚动，可在此处找到：https://github.com/CristianDavideConte/universalSmoothScroll
基本上解决方案是：不要同时使用 translate 和 backdrop-filter:blur ，只需让父容器可滚动并在需要时平滑滚动即可。

我重写了您的滑块示例，以便它可以正确地与 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 */
}

<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script> <!-- Added -->
<body onload="init()"> <!-- Added init -->
  <div class="container">
    <button id= "left-arrow" class ="slick-arrow">&lt;</button> <!-- Added -->
    <div class="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>
    <button id= "right-arrow" class ="slick-arrow">&gt</button>  <!-- Added -->
  </div>
</body>

这种方法的优点是您可以像使用“slick-slider”一样自定义滑块的滚动相关部分。
如果您需要使用此 API 构建的轮播的更多示例，您可以在此处查看：https://cristiandavideconte.github.io/myPersonalWebPage/#home

如何修复 CSS backdrop-filter 模糊在使用 transition-transform 或持续时间时消失？ [Chrome 仅]

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

css

transform

blur