Safari下scroll-snap-type: y mandatory存在不可见边距错位

问题本质 #

这是MacOS Big Sur对应版本Safari的已知兼容性bug：当html/body根节点被直接设置为scroll-snap吸附容器时，滚动定位的计算逻辑会产生累计偏移——每完成一次强制吸附，上一次的位置误差就会叠加到下一次定位上，最终出现裁切区块顶部、露出相邻区块、偏移间隙随滚动次数逐渐变大的现象。
该bug不会出现在Chromium内核的Chrome、Edge浏览器中，因此在Windows、Mac平台的其他浏览器上测试时表现正常。

修复步骤 #

• 第一步：更换吸附容器的承载位置
  不要直接把scroll-snap-type规则绑定在html、body根节点上，改用独立的滚动容器实现吸附逻辑：
  1. 移除html、body上所有和scroll-snap相关的属性，给这两个元素设置height: 100%、清除默认的margin、padding，避免干扰滚动计算。
  2. 新增一个占满全视口的容器，将原本直接放在body下的所有<section>区块全部移入这个容器内部，给容器设置核心吸附规则：

     .scroll-snap-wrapper {
       height: 100vh;
       overflow-y: auto;
       scroll-snap-type: y mandatory;
       scroll-padding: 0;
       overscroll-behavior-y: none;
     }
     

  3. 给容器内部的<section>保留原有的对齐规则即可，不需要大幅调整参数：

     .scroll-snap-wrapper > section {
       height: 100vh;
       margin: 0;
       scroll-snap-align: start;
     }
     

• 第二步：规避Safari的计算细节问题
  给所有吸附容器和子区块设置整数位的高度值，不要使用带小数的视口高度（例如100.2vh这类写法）——Safari会把小数位的高度舍入误差逐步累计，最终形成数百像素的偏移差。

之前排查调整无效的原因 #

你之前尝试设置的scroll-padding、scroll-snap-margin属性本身用法没有问题，但因为触发的是根节点作为吸附容器的底层计算bug，这些参数调整无法修正累计偏移的逻辑，部分调整甚至会改变默认计算基准，进一步放大偏移误差。

兼容补充：如果业务场景必须使用根节点的原生滚动能力，可以给根节点的吸附规则加上Safari专属前缀属性：

html {
  -webkit-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

但该写法在MacOS Big Sur的旧版Safari上仍可能存在偏移问题，优先使用独立滚动容器的实现方式兼容性更稳定。

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