iPhone端Chrome浏览器CSS背景样式显示异常的修复咨询

问题复现 #

你开发的生日邀请网站在Web Inspector预览时背景按屏幕尺寸固定显示正常，但上传后在iPhone 11的Chrome浏览器中，背景被错误拉伸至整个网站内容高度，而非保持视口尺寸固定。当前使用的CSS代码如下：

body {
    margin: 0;
    padding: 0;
    background-image: url('background_.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

问题原因 #

iOS平台的Chrome基于WebKit内核，对background-attachment: fixed与background-size: cover的组合存在兼容性bug：当页面内容高度超过视口高度时，浏览器会错误地以整个文档高度而非视口高度作为背景计算基准，导致背景过度拉伸。

解决方案 #

推荐采用以下两种可靠方案修复：

方案1：用伪元素模拟固定背景（最优解）

通过给<html>添加固定定位的伪元素实现背景固定，规避WebKit的兼容性问题：

html {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: url('background_.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

这种方法将背景独立挂载在视口层级，完全不受文档内容高度影响，同时保持背景固定的效果。

方案2：替换background-attachment属性

如果可以接受滚动时背景随页面移动，可将background-attachment: fixed改为scroll，并确保页面根元素高度设置正确：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

body {
    background-image: url('background_.jpg');
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

额外检查 #

确保HTML头部已添加正确的viewport元标签，避免视口计算异常：

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

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