毛玻璃边缘在Chrome 120+失效主因是overflow:hidden或层叠上下文裁剪backdrop-filter；应检查Computed面板、移除裁剪属性、避免transform/will-change干扰，Firefox不支持伪元素上使用需降级为真元素。
毛玻璃边缘在 Chrome 120+ 里突然失效？检查 backdrop-filter 是否被裁剪
很多情况下边缘模糊没出来，不是写法错，是父容器或自身触发了「层叠上下文」且同时设置了 overflow: hidden（比如 border-radius + overflow: hidden 组合），导致 backdrop-filter 的模糊区域被硬裁掉。
实操建议：
- 用 Chrome DevTools 检查目标元素的「Computed」面板，确认
backdrop-filter是否生效（有值但没效果，大概率是裁剪问题） - 临时移除
overflow: hidden或clip-path，看模糊是否恢复；若恢复，说明是渲染层截断 - 改用
mask-image或clip-path: inset()替代overflow: hidden，它们不干扰 backdrop 渲染 - 确保父级没有
transform: translateZ(0)或will-change: transform——这些会创建独立合成层，有时也切断 backdrop 采样
用 ::before 模拟毛玻璃边缘时，filter: blur() 和 backdrop-filter: blur() 别混用
filter: blur() 是对元素自身内容做后处理，而 backdrop-filter: blur() 是对「背后内容」采样再模糊。想实现边缘虚化，必须用后者；前者只会把你的伪元素自己糊成一团，还遮不住后面真实内容。
常见错误现象：边缘看起来“发灰”“不透明”，或者模糊范围固定、无法随滚动变化。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
::before设置backdrop-filter: blur(10px)，同时设background: rgba(255,255,255,0.1)做半透底色 - 必须加
content: ""和显式尺寸（width/height或inset），否则伪元素不渲染 - 定位用
position: absolute+inset: -10px（数值要 ≥ 模糊半径），让模糊区域向外延伸 - 别给
::before加z-index，除非你明确需要它盖住其他兄弟元素；默认层叠顺序更安全
Firefox 不支持 backdrop-filter 在伪元素上生效？换真元素或加降级
Firefox 目前（v126）仍不支持在 ::before/::after 上使用 backdrop-filter，哪怕写了也没反应。这不是 bug，是规范实现进度问题。
使用场景：你需要兼容 Firefox，又不想放弃毛玻璃边缘效果。
实操建议：
- 用真实 DOM 元素替代伪元素，比如在容器内插入
<div class="glass-edge"></div>，再用 CSS 定位到边缘 - 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式，内部写降级方案（如纯rgba()边框或细微阴影） - 避免依赖
backdrop-filter做关键信息展示——它始终是装饰性增强，不是功能必需 - 注意 Safari 对
backdrop-filter的性能敏感度更高，大量使用时滚动可能掉帧，边缘模糊建议控制在blur(8px)以内
边缘模糊和滚动内容错位？检查 contain 和父级 transform
当容器设置了 contain: layout paint 或父级有 transform，Chrome 有时会错误复用 backdrop 缓存，导致滚动时边缘模糊“粘”在旧位置不动。
性能影响明显：首次滚动卡顿，后续模糊区域偏移量越来越大。
实操建议：
- 移除触发合成的冗余
transform（比如仅为了开启硬件加速加的translateZ(0)） - 避免在滚动容器上直接设
contain: strict；如需性能优化，优先用contain: layout style - 给毛玻璃边缘元素加
will-change: transform反而可能加重错位——只在真正需要动画时加，且配合transform: translateZ(0)一起用 - 如果必须用
contain，把毛玻璃边缘元素提到滚动容器外层，用绝对定位对齐，绕过 containment 边界
模糊边缘的本质是「对背后像素采样 + 卷积」，任何打断采样路径的操作（裁剪、合成层隔离、缓存误用）都会让它失准。最稳的方式永远是：最小作用域、最少合成干预、降级可感知。
