Safari浏览器网页顶部1像素内容缺失问题排查及解决

成因 #

Safari的橡皮筋滚动（overscroll）机制在页面内容高度小于视口高度时，会允许根元素（html/body）向上滚动超出视口范围，导致页面顶部元素的边框被隐藏在视口外，只有向下滚动页面才能看到。其他浏览器的滚动逻辑不会让根元素的滚动偏移影响初始渲染位置，因此无此问题。

实现多浏览器一致显示的方案 #

方案1：限制根元素的滚动范围，禁用全局橡皮筋效果 #

通过设置html和body的样式，将滚动容器限定在body内，避免根元素被拉动：

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  overflow-y: auto;
}

这种方式既保留了页面内容的滚动能力（当内容超过视口时），又能防止顶部元素被橡皮筋滚动区域遮挡。

方案2：固定顶部元素定位 #

如果该div是需要固定在顶部的元素，直接使用固定定位脱离页面流，不受滚动偏移影响：

div {
  border: 1px solid yellow;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

方案3：确保内容高度不小于视口 #

给body设置最小高度为视口高度，避免触发Safari的根元素橡皮筋滚动：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

当内容高度等于视口高度时，Safari不会允许根元素向上滚动，顶部边框即可正常显示。

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