火狐及Safari移动端Mobile Menu被拉伸至1500px异常问题求解

问题根因 #

• 定位属性冲突：移动端媒体查询中，你给基础.headroom设置了position: fixed，但.headroom--pinned状态又覆盖为position: sticky，火狐移动端、Safari对sticky元素的宽度计算逻辑和Chrome不同：没有显式设置宽度的sticky元素会继承父级内容的实际宽度，而非视口宽度，你的页面存在溢出元素把内容宽度撑到了1500px，就会导致header被拉伸。
• 宽度约束缺失：仅设置max-width: 100%对未显式声明width的定位元素无效，部分移动端内核会忽略该约束。
• 未做全局横向溢出限制：页面中其他超出视口的元素（比如宽图、未换行的长文本、固定宽容器）会把根节点内容宽度撑大，间接影响定位元素的宽度计算。

修复步骤 #

1. 移除定位属性冲突
   删除template_responsive.css中.headroom--pinned规则里的position: sticky声明，统一用fixed定位即可满足滚动显隐需求，避免两种定位模式切换带来的计算异常：

@media (max-width: 1179px) {
  .headroom--pinned {
    top: 50px;
    /* 删掉原有的position: sticky; 继承外层的fixed定位即可 */
  }
}

2. 补全headroom的宽度约束
   在移动端媒体查询的.headroom规则中新增以下属性，强制宽度匹配视口：

@media (max-width: 1179px) {
  .headroom {
    /* 原有属性保留，新增如下内容 */
    width: 100%;
    box-sizing: border-box;
    max-width: 100vw !important;
  }
}

3. 新增全局横向溢出限制
   给全局根节点加溢出限制，避免其他元素撑宽页面：

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

4. 确认viewport配置正确
   检查模板头部是否存在正确的视口元标签，没有的话新增即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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