Safari浏览器下网页特定区块异常可滚动问题求助

问题排查与修复方案 #

常见原因&对应修复方法 #

• 溢出判定规则差异：Safari对内容溢出的判定阈值比Chromium、Gecko内核浏览器更严格，仅1px的宽高溢出就会触发滚动，其他浏览器通常会忽略微小溢出
  修复：给异常区块显式添加对应方向的overflow: hidden，如果仅需要禁止横向滚动用overflow-x: hidden，仅禁止纵向滚动用overflow-y: hidden
• Flex布局高度计算兼容性问题：如果异常区块是flex布局的子项，Safari默认不会给flex子项添加min-height: 0/min-width: 0约束，会导致子项内容撑开父容器触发意外滚动
  修复：给该flex子项显式添加min-height: 0（纵向滚动异常）或min-width: 0（横向滚动异常）
• webkit专属滚动属性冲突：如果全局样式中声明了-webkit-overflow-scrolling: touch，该属性会强制Safari给所有溢出元素启用弹性滚动效果，哪怕溢出尺寸极小
  修复：给异常区块添加-webkit-overflow-scrolling: auto覆盖全局规则即可
• 子元素边界溢出：Safari对子元素的负margin、绝对定位偏移的边界计算和其他浏览器存在差异，可能出现子元素超出父容器但其他浏览器未识别到溢出的情况
  修复：临时给该区块所有子元素添加outline: 1px solid red排查超出边界的元素，修正子元素尺寸或定位即可

快速验证方法 #

你可以先给异常区块直接加如下样式快速验证是否修复：

.target-block {
  overflow: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: auto;
}

如果添加后问题消失，再逐个删除样式定位具体触发问题的属性即可。

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