如何修复CSS背景过滤器模糊消失时使用过渡变换或持续时间?[仅限Chrome浏览器]

Question

编辑：Chromium已经修复了这个错误

简单代码笔：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模糊会消失一秒钟，然后幻灯片再次模糊。

Chrome：问题

Firefox：工作(您必须首先在about:config中启用背景过滤器(

Webkit/Safari：工作

编辑：Chromium上有一份关于此问题的已确认错误报告https://bugs.chromium.org/p/chromium/issues/detail?id=1194050

Answer 1

如果不使用translate，可以使用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>

Answer 2

这是个bug
我在建立自己的投资组合时也遇到过这种情况
我解决问题的方法是使用我编写的用于平滑滚动的API，该API在这里可用：https://github.com/CristianDavideConte/universalSmoothScroll
基本上，解决方案是：不要同时使用平移和背景过滤器：模糊，只需使父容器可滚动，并在需要时平滑滚动即可。

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

这种方法的优点是，您可以像使用"滚动"一样自定义滑块的滚动相关部分；光滑滑块">
如果您需要使用此API构建的旋转木马的更多示例，您可以在此处查看：https://cristiandavideconte.github.io/myPersonalWebPage/#home