堆叠使用backdrop-filter: blur()的Div在不同屏幕尺寸下出现间隙/伪影的问题解决咨询

大家好，我最近在实现一个由10个堆叠切片组成的玻璃态进度条，每个切片都单独设置了backdrop-filter: blur()效果。这个效果在桌面端的Chrome和Edge上表现完美，但在高DPR的移动设备屏幕上（比如iOS 17的Safari、Android 120的Chrome），切片之间会出现细细的未模糊线条，实在很影响整体效果。

效果对比 #

• 预期效果：实现无缝的垂直模糊渐变，切片之间没有任何可见边界
• 实际问题：在移动和平板视口下，切片之间出现水平方向的1像素缝隙/间隙

最小复现代码 #

HTML

<div class="glass-container" id="glass"></div>

CSS

body {
  background: url('https://picsum.photos/600/400?blur=1') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.glass-container {
  position: relative;
  width: 280px;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
  backface-visibility: hidden;
}

.glass-slice {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: rgba(102, 102, 102, 0.25);
  will-change: backdrop-filter;
}

JavaScript

const container = document.getElementById('glass');
const blurValues = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
const sliceCount = blurValues.length;

blurValues.forEach((blur, i) => {
  const slice = document.createElement('div');
  slice.className = 'glass-slice';
  slice.style.top = `${(i / sliceCount) * 100}%`;
  slice.style.height = `${100 / sliceCount}%`;
  slice.style.backdropFilter = `blur(${blur}px)`;
  slice.style.webkitBackdropFilter = `blur(${blur}px)`;
  container.appendChild(slice);
});

我已经尝试过的方案 #

• 切换使用vh、px、fr（网格布局）等单位设置切片高度，但缝隙问题依然存在
• 让切片之间重叠1像素可以隐藏缝隙，但会导致边缘变柔和，这不符合设计师的要求

我的问题 #

请问有没有办法在不使用可见重叠的情况下，消除这些切片之间的缝隙？

环境信息 #

React 18、Android Chrome 120、iOS Safari 17、设备DPR为2–3

内容来源于stack exchange