移动端Safari及iOS浏览器页面出现横向滚动条问题求助

问题背景 #

• 基于最新版Bootstrap构建的站点，仅在iOS设备的Safari、Chrome浏览器，以及macOS Safari（含iPhone模拟模式）中出现横向滚动条；安卓设备、Windows端Chrome的响应式测试均显示正常
• 采用相同模板的页面，仅产品数量较多的页面出现该问题，推测根源在产品列表的HTML标记或样式，但通过全局outline调试未发现元素明显超出视口
• 已尝试的调试代码：

* {
    outline: 1px solid #f00 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

• 限制条件：不能给html/body设置overflow-x: hidden，会导致粘性头部功能失效

排查与修复方案 #

1. 修正Safari盒模型的累计误差 #

Safari对盒模型的width/padding/margin计算逻辑与Chrome存在细微差异，大量产品卡片的累计误差可能触发横向溢出：

• 给产品列表的父容器添加overflow-x: clip（替代hidden，不影响粘性头部的正常工作）：

.product-grid-wrapper {
    overflow-x: clip;
}

• 检查所有产品卡片的栅格类（如col-6/col-md-3）是否正确，避免手动设置固定width导致超出栅格宽度

2. 修复Flex布局的换行计算问题 #

当产品列表使用Flex布局时，Safari在元素换行时可能出现计算错误，导致横向溢出：

• 给Flex容器明确设置flex-wrap: wrap，同时强制子元素可收缩：

.product-flex-container {
    display: flex;
    flex-wrap: wrap;
}
.product-flex-container .card {
    min-width: 0; /* 强制子元素在空间不足时收缩 */
}

3. 处理动态文本的溢出问题 #

产品卡片中的长标题、描述文本可能在Safari中无法自动换行，导致卡片宽度超出视口：

• 给文本容器添加强制换行样式：

.card-title, .card-description {
    word-break: break-word;
    overflow-wrap: break-word;
}

4. 适配iOS安全区域与滚动条 #

iOS Safari的悬浮式滚动条可能被隐性计算进视口宽度，尝试给页面主容器添加安全区域适配：

.main-content {
    padding-right: env(safe-area-inset-right);
}

精准定位技巧 #

• 使用Safari开发者工具的元素检查器，选中<html>标签，查看右侧「布局」面板中的scrollWidth值，若大于clientWidth，则说明存在横向溢出；通过逐步收起DOM节点，定位到具体的溢出元素
• 逐步删除产品卡片，直到横向滚动条消失，以此锁定触发问题的卡片或内容块

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