Chrome94安卓手机：backdrop-filter blur与border-radius兼容问题求助

针对Chrome 94+安卓手机上backdrop-filter: blur()与border-radius冲突的问题，可尝试以下几种可行方案：

方案1：给目标元素添加overflow: hidden #

给同时设置了backdrop-filter和border-radius的元素加上overflow: hidden，强制浏览器正确裁剪模糊区域到圆角范围内：

.glass-element {
  border-radius: 30px;
  backdrop-filter: blur(8px);
  overflow: hidden; /* 关键修复 */
}

方案2：用父容器实现圆角裁剪 #

如果方案1无效，将毛玻璃元素放在带圆角的父容器中，父容器设置overflow: hidden，毛玻璃元素无需单独设置圆角：

<div class="rounded-container">
  <div class="glass-element"></div>
</div>

.rounded-container {
  border-radius: 30px;
  overflow: hidden;
}
.glass-element {
  backdrop-filter: blur(8px);
  width: 100%;
  height: 100%;
}

方案3：触发硬件加速 #

通过transform: translateZ(0)触发GPU硬件加速，修复渲染异常：

.glass-element {
  border-radius: 30px;
  backdrop-filter: blur(8px);
  transform: translateZ(0); /* 触发硬件加速 */
}

方案4：微调border-radius值 #

部分临界像素值可能触发浏览器渲染bug，尝试将30px调整为相近值（比如29px或31px），或改用百分比单位：

.glass-element {
  border-radius: 29px; /* 微调像素值 */
  /* 或 border-radius: 20%; */
  backdrop-filter: blur(8px);
}

以上方案均针对Chrome移动端特定版本的渲染bug设计，可逐一测试找到适配你场景的方法。

内容的提问来源于stack exchange，提问作者BulliedByModeratorsAgain_Again