移动端滚动渐变断层是因合成层降级致16位色深限制暴露，需用transform: translatez(0)与will-change: transform双触发、禁用rgba/to方向词、插入非整数中间色、确保html{height:100%}及background简写。
移动端滚动时渐变断层是合成层被破坏导致的
不是渐变写错了，也不是颜色选得不好——Safari 和部分 Android WebKit 在滚动过程中会临时降级渲染路径，把原本在 GPU 独立合成层里的渐变，切回 CPU 软件渲染。这时 16-bit 色深限制立刻暴露，相邻色阶被跳过，形成肉眼可见的灰白/灰黑硬边。
关键信号：滚动中突然出现色带，松手后又短暂恢复平滑；DevTools → Layers 面板里该元素的图层标黄或消失（而非稳定标红）。
- 伪元素必须同时满足
transform: translateZ(0)和will-change: transform，缺一不可。只加一个在 iOS 16+ 上大概率失效 - 主元素不能有任何
background值，连background: transparent都要显式写上，否则 Safari 可能合并图层 -
inset: 0比top: 0; left: 0; width: 100%; height: 100%更可靠，后者在某些 zoom 缩放下会漏像素
双色渐变在滚动中尤其脆弱
起止色明度接近（如 #f5f5f5 → #ffffff）或跨度大（如 #000000 → #ffffff）时，浏览器默认只在 0% 和 100% 采样插值，中间全靠线性推算。滚动触发重绘，GPU 插值缓冲清空，断层就“啪”一下弹出来。
- 至少插入 1 个中间色，位置别取整：比如
#f5f5f5 49.5%, #fafafa 50.5%，留出缓冲区间 - 禁用
rgba()和rgb()，改用 8 位 hex 或transparent；旧版 Safari 对透明通道解析极不稳定 - 避免
to right这类带to的方向词，旧 WebKit 只认right，写错直接忽略整条渐变
body 高度塌陷会让断层变成水平条纹
滚动到底部时渐变突然截断、留白，或出现重复平铺的硬边条纹——这不是断层，是高度没撑开导致渐变被压缩成几像素高再拉伸，浏览器把它当小图 tile 渲染了。
- 必须写
html { height: 100% }，这是最小必要改动，否则body百分比高度无根可依 -
body用min-height: 100vh而非height: 100vh，否则长页面底部无背景 - 渐变声明必须用
background简写（自动设no-repeat），别用background-image单独写，否则默认repeat
真正有效的调试手段只有两个
别信“加 backface-visibility: hidden 就行”这种过时机理。2026 年真机实测有效的验证方式只剩：
- 打开 Safari DevTools → Layers 面板，确认伪元素图层是稳定红色（已进入独立合成层），且不随滚动闪烁变黄
- 在滚动过程中快速暂停帧（Timeline → record → pause），看 Computed 样式里
transform是否仍为translateZ(0)，还是被 runtime 覆盖成none
所有其它方案——比如调 image-rendering、加噪点 SVG、放大 background-size——都只能缓解，无法根治滚动时的合成层降级问题。核心永远是守住那个红色图层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
