iOS全浏览器下导航栏应用backdrop-filter模糊效果出现显示异常

给导航栏添加模糊效果时，出现仅iOS设备独有的显示异常，和浏览器类型无关，各端表现如下：

• iOS端Safari浏览器表现：
  
• iOS端Chrome浏览器表现：
  
• Android端Chrome浏览器表现正常：
  
• 模拟器表现正常：
  

现有实现的CSS代码：

.navbar-item {
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px)
}

问题原因 #

1. iOS系统限制所有第三方浏览器必须使用WebKit内核渲染，所以不管是Safari还是Chrome在iOS上的CSS渲染逻辑完全一致，才会出现全iOS端的统一异常表现。
2. WebKit内核对backdrop-filter的实现存在特殊规则：要求应用该属性的元素必须设置透明度不为1的背景色，否则会自动叠加一层半透明白色遮罩，导致出现异常的灰白遮挡、模糊范围错误等问题。

修复方案 #

给应用backdrop-filter的元素添加一个极低透明度的背景色即可，不会影响正常视觉效果的同时能触发iOS的正常渲染逻辑，修改后的代码如下：

.navbar-item {
     /* 可根据导航栏设计调整rgb值，透明度设置在0.01~0.1区间即可 */
     background-color: rgba(255, 255, 255, 0.01);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     /* 可选：确保元素层级正常，避免层叠上下文冲突 */
     z-index: 10;
     /* 可选：如果仍有异常可以添加该属性触发硬件加速 */
     transform: translateZ(0);
}

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