安卓端Firefox中background-attachment: fixed失效如何解决

查阅多份Stack Overflow旧帖及Mozilla缺陷跟踪平台记录，该问题属于反复出现的历史兼容性问题。在body标签的背景样式中使用background-attachment: fixed;属性时，安卓端Firefox始终无法正确定位背景：

• 浏览器导航栏显示时，背景会跳过导航栏融合的底部区域，露出底层红色背景
• 导航栏隐藏时，背景图同样无法覆盖完整屏幕空间，红色背景始终可见

相关问题截图：

测试代码 #

CSS代码 #

.body-bg {
    background-color: red;
    background-image: url('https://picsum.photos/id/237/200/300');

    background-repeat: no-repeat;
    background-position: center;

    /* This does not properly work*/
    background-attachment: fixed;

    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML代码 #

<!doctype html>
<html lang="en">

<head>
    <style>
        .body-bg {
            background-color: red;
            background-image: url('https://picsum.photos/id/237/200/300');

            background-repeat: no-repeat;
            background-position: center;

            background-attachment: fixed;
        
            height: 100%;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
     
        }
    </style>
</head>

<body class="body-bg">
<!-- 大量br标签构造可滚动垂直空间 -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
END
</body>

解决方案 #

该问题的核心原因是安卓端Firefox的视口高度会随导航栏的显示/隐藏动态变化，但background-attachment: fixed的锚定逻辑不会跟随动态视口高度更新，导致背景定位偏移。可以通过以下两种方案修复：

方案1：固定定位伪元素替代（兼容性最优） #

放弃使用background-attachment: fixed，改用固定定位的伪元素承载背景，层级设置为最底层即可，适配所有移动端浏览器：

/* 先重置浏览器默认边距 */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
.body-bg {
    position: relative;
    min-height: 100vh;
}
.body-bg::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: red;
    background-image: url('https://picsum.photos/id/237/200/300');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

方案2：动态视口单位适配 #

安卓端Firefox已支持dvh动态视口单位，会自动跟随导航栏状态调整高度计算，直接替换原有的高度设置即可：

.body-bg {
    height: 100vh; /* 低版本浏览器回退 */
    height: 100dvh;
}

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