简单代码页：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：正在工作
不使用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>
