Chrome移动端background cover定位异常问题求助

问题代码 #

<!doctype html> 
<html> 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    html { 
        background: url("https://images.freeimages.com/365/images/previews/e2e/television-test-screen-no-signal-vector-illustration-7227.jpg") center center/cover no-repeat fixed;
    }
    </style>
</head>
<body> 
</body>
</html>

异常表现 #

• Chrome移动端首次加载时，背景图显示异常：屏幕高度被错误拉长，测试画面的中心十字线偏移至屏幕下半区域，顶部出现大量空白
• 点击屏幕后，背景图恢复正常居中显示，中心十字线与屏幕中心对齐
• 添加其他居中元素时，同样会出现向下偏移的情况

预期表现 #

背景图应保持居中显示，图像中心与屏幕中心完全重合

设备环境 #

Galaxy S22 Ultra / Android 13 / Chrome 108.0.5359.128（无痕模式）

问题原因 #

这是Chrome移动端的已知布局计算bug：当仅给html元素设置固定定位的背景，且body元素未设置高度属性时，浏览器会错误计算视口高度（可能误将浏览器状态栏、导航栏的高度纳入视口计算，或触发了初始布局的视口逻辑异常），导致背景定位的中心点偏移。而点击屏幕会触发页面的重排/重绘，浏览器重新计算正确的视口尺寸，因此背景图恢复正常。

修复方案 #

给body元素设置最小高度并清除默认外边距，确保页面高度正确覆盖视口，修改后的样式如下：

html { 
    background: url("https://images.freeimages.com/365/images/previews/e2e/television-test-screen-no-signal-vector-illustration-7227.jpg") center center/cover no-repeat fixed;
}
body {
    min-height: 100vh;
    margin: 0;
}

也可以将背景样式直接移到body元素上，同时确保html和body的高度都正确设置，同样能解决该问题。

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