Three.js CSS3D渲染在Safari中出现像素化问题求助

问题描述 #

该场景在其他所有浏览器中渲染均正常：

但在Safari中显示为像素化效果：

所有元素均为HTML div，已尝试使用SVG、JPEG和PNG作为背景，问题仍存在。

可能的解决方案 #

1. 强制开启Safari图像平滑渲染 #

Safari会对小尺寸或缩放后的背景图默认关闭平滑处理，可通过CSS强制优化：

.target-div {
  /* 针对Safari的兼容写法，强制平滑渲染 */
  -webkit-image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}

也可尝试触发硬件加速改善渲染：

.target-div {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

2. 检查背景图尺寸与缩放设置 #

• 确保背景图原始尺寸是其显示尺寸的整数倍，避免缩放时出现像素失真
• 若使用background-size: contain/cover，尝试替换为具体像素值或百分比，同时添加background-repeat: no-repeat避免重复拉伸

3. 关闭低功耗模式 #

Safari在低功耗模式下会降低渲染性能，可能导致图像质量下降，关闭设备低功耗模式后重新测试

4. 排查CSS滤镜/混合模式冲突 #

如果div应用了filter或mix-blend-mode等属性，这些效果在Safari中可能与背景图渲染冲突，暂时移除后验证是否解决问题

5. 更新Safari版本 #

旧版Safari存在部分渲染bug，将Safari更新至最新版本后再检查问题是否消失

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