iOS Safari弹性滚动拉出白边，是因根容器被拖离视口暴露空白区域，非background-color未设；需用overscroll-behavior+body固定定位双保险，并扩大背景图尺寸至105%以上预留缓冲。
为什么移动端弹性滚动会拉出背景白边
这不是 background-color 没设好，而是 iOS Safari 和部分安卓 WebView 在触发 overscroll-behavior 弹性回弹时，会把根容器（html 或 body）临时“拖离”视口边界——此时背景图已随容器位移，但视口边缘暴露出未被覆盖的空白区域。哪怕你写了 background-color: #fff，只要背景图没填满整个滚动轨迹，就会露白。
用 overscroll-behavior + 固定根容器双保险
单靠 overscroll-behavior: contain 不够，它只禁用弹性效果，不阻止根容器被拖动。必须配合根级定位锁定：
-
html, body { height: 100vh; margin: 0; }—— 确保高度基准可靠，避免因默认行为塌缩 -
body { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; }—— 把 body 钉死在视口原点，彻底切断拖拽透传 -
#root { overscroll-behavior: contain; }—— 若用 React/Vue，给挂载节点加该属性，约束内部滚动容器不触发全局回弹
背景图必须撑满滚动轨迹，不能只靠 cover
background-size: cover 只保证单帧填满，但弹性滚动中容器实际渲染区域可能短暂超出视口（尤其 iOS），导致图片边缘来不及重绘而露底色。解决方案是显式扩大背景作用域：
- 给背景容器加
background-attachment: scroll（显式覆盖继承值，避免 fixed 在移动端失效干扰） - 用
background-position: center center+background-repeat: no-repeat - 关键一步：加
background-size: 120% 120%或至少105% 105%—— 让图片物理尺寸略大于容器，预留弹性位移缓冲区 - 若用伪元素承载背景（如
::before），对其加transform: translateZ(0)确保合成层稳定，减少闪白
真机调试时最容易忽略的坑
DevTools 模拟器里一切正常，但真机一拖就露白，往往因为：
- 你加了
touch-action: pan-y，但它在触底/顶时仍会 fallback 到全局拖拽 —— 必须配合body { position: fixed }才真正生效 - 背景图路径用了相对 URL（如
url(./bg.jpg)），而预加载用的是绝对路径（如new Image().src = '/static/bg.jpg'），缓存不命中，首帧无图可绘 -
height: 100vh在 iOS Safari 横屏切换瞬间会短暂取值为 0 —— 加@supports (height: 100dvh) { body { height: 100dvh; } }可缓解（dvh是动态视口单位，2023 年起支持）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
