iOS Safari背景图缩放异常问题排查与代码优化咨询

我碰到过好多次这个iOS Safari的坑了！问题根源在于移动端Safari对background-attachment: fixed和vh单位的组合支持有bug，它的视口计算逻辑和Android端浏览器不一样，导致fixed背景图被异常缩放。下面给你两种靠谱的优化方案：

方案一：用伪元素模拟固定背景（最推荐） #

直接放弃给容器设置background-attachment: fixed，改用固定定位的伪元素来做背景，这种方式在所有移动端浏览器里都能稳定渲染：

首先HTML保持不变，修改CSS代码：

#background {
  position: relative;
  height: 92.5vh;
  overflow: hidden; /* 防止伪元素内容溢出容器 */
  /* 保留你原来的其他内容样式，比如文字排版 */
}

#background::before {
  content: '';
  position: fixed; /* 固定在视口 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('你的背景图URL'); /* 替换成你的实际背景图地址 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* 或者你需要的其他size值 */
  z-index: -1; /* 把背景放在内容下方 */
}

这个方案的核心是用position: fixed的伪元素单独承载背景，完全避开了Safari对background-attachment: fixed的渲染bug，同时保持了背景固定的效果。

方案二：修复vh的计算偏差 #

如果不想改结构，也可以先调整vh的计算，因为Safari的vh会包含顶部状态栏和底部导航栏的高度，导致容器高度计算错误，间接引发背景缩放：

1. 先确保HTML的<head>里有正确的视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. 修改CSS的高度计算：

#background {
  /* 用calc调整vh，减去安全区域的内边距 */
  height: calc(92.5vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 可以尝试去掉background-attachment: fixed，或者结合方案一使用 */
}

额外提示 #

如果你的背景图本身尺寸不够大，也可能在高分辨率屏幕上出现模糊或缩放问题，尽量使用两倍或三倍分辨率的图片，并配合background-size: cover来保证显示效果。

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