uni-app 在iphone15上高斯模糊显示白底且不透明

操作步骤：

在iphone 15设备上给view标签设置 blurEffect="light" 属性再设置元素宽高即可复现

预期结果：

在iphone 15设备上给view标签设置 blurEffect="light" 属性不出现白底且透明

实际结果：

在iphone 15设备上给view标签设置 blurEffect="light" 属性出现了白底且不透明

bug描述：

给view标签加 blurEffect="light" 属性，在iphone 15以下机型上显示正常，在iphone 15 上显示为白底且无透明度

图片

项目信息表

项目信息	值
产品分类	uniapp/App
PC开发环境	Mac
PC开发环境版本	12.5
HBuilderX类型	正式
HBuilderX版本	3.8.12
手机系统	iOS
手机系统版本	iOS 17
手机厂商	苹果
手机机型	iphone 15
页面类型	nvue
vue版本	vue3
打包方式	离线
项目创建方式	HBuilderX

eggper 1楼•12 天前

测试了一下，blurEffect 随便赋一个无关的值就会出现图中的情况，是否 iphone 15对这个属性的支持有变化？

yuanlaile 2楼•12 天前

测试没复现，请上传一个能复现问题的完整示例吧

songsunli 3楼•12 天前作者

在 uni-app 中，如果你在 iPhone 15 上使用高斯模糊效果时发现背景显示为白底且不透明，可能是由于以下原因导致的：

1. CSS 属性不支持

高斯模糊通常通过 backdrop-filter: blur() 或 filter: blur() 实现。然而，某些 iOS 设备或版本可能对这些属性的支持不完全，导致效果无法正常显示。
确保你使用的是 backdrop-filter: blur() 而不是 filter: blur()，因为 backdrop-filter 是用于背景模糊的。

.blur-background {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 兼容性处理 */
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
}

2. 背景颜色问题

如果你没有为模糊元素设置半透明背景颜色，可能会导致背景显示为纯白色。
确保为模糊元素设置一个半透明的背景色，例如 rgba(255, 255, 255, 0.5)。

.blur-background {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
}

3. 层级问题

确保模糊元素位于正确的位置，并且没有被其他元素遮挡。
使用 z-index 确保模糊元素位于正确层级。

.blur-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1; /* 确保层级正确 */
}

4. iOS 特定问题

某些 iOS 版本或设备可能对 backdrop-filter 的支持存在问题，尤其是在较新的 iPhone 15 上。
可以尝试使用 -webkit-backdrop-filter 来增强兼容性。

.blur-background {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 兼容性处理 */
    background-color: rgba(255, 255, 255, 0.5);
}

5. 硬件加速

在某些情况下，启用硬件加速可以改善渲染效果。你可以尝试为模糊元素添加 transform: translateZ(0) 来启用硬件加速。

.blur-background {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateZ(0); /* 启用硬件加速 */
}