渐变背景被截断是因为body未撑满内容高度，需同时设置html{height:100%}和body{min-height:100vh}；safari锯齿问题需用伪元素+translatez(0)+will-change修复；容器尺寸抖动导致闪烁，应设宽高比或预占位；旧版浏览器需svg或canvas降级。
渐变背景被截断是因为body高度没撑满内容区
滚动到页面底部才发现渐变突然“断了”，不是图片或颜色写错了，而是body元素默认只包裹内容高度，不随滚动内容延展。当页面内容远超视口（比如长图文、瀑布流），而body又没设min-height: 100vh或height: 100%，渐变就只能渲染在初始那块“可见区域”里，后面全是透明底色。
常见错误写法：body { background: linear-gradient(...); }，但没配html, body { height: 100%; }——此时body计算高度为0px或仅内容高，渐变自然被截。
- 必须同时设置
html { height: 100%; }和body { min-height: 100vh; }，不能只写一个 -
min-height: 100vh比height: 100vh更安全：它允许body随内容增长，避免底部留白 - 若用Flex布局做全屏容器，记得给父级加
flex: 1或height: 100%，否则子元素的100%无锚点
伪元素+合成层修复Safari渐变锯齿与截断叠加问题
iOS Safari在滚动时不仅可能截断渐变，还会因GPU采样精度低让边缘出现明显色带，尤其在长页面反复重绘过程中。这时单靠撑高body不够，必须把渐变从主元素剥离，交给独立合成层处理。
- 给目标容器（如
.page）设position: relative和background: transparent - 用
::before伪元素承载渐变：content: ""、position: absolute、inset: 0 - 关键两行必须同时存在：
transform: translateZ(0)+will-change: transform，缺一不可 - 避免在伪元素上写
rgba()或hsl()，统一用十六进制色值（如#ff7e5f），防止WebKit降级到16-bit色深路径
滚动中渐变闪烁或跳变的根源是容器尺寸抖动
长页面滚动时，如果渐变容器本身高度不稳定（比如内部有图片未设宽高比、或Flex项未冻结尺寸），浏览器会反复触发重排，导致背景重绘不同步——看起来就是渐变“闪一下”或“突然缩放”。这不是渐变语法问题，而是占位缺失。
- 给渐变容器设明确宽高比：
aspect-ratio: 16 / 9（现代浏览器）或padding-top: 56.25%+position: relative+ 子元素position: absolute; inset: 0 - 禁用
height: auto或flex: 1直接作用于渐变层，它们会让高度随内容浮动，破坏背景连续性 - 若容器内含懒加载图片，提前用
loading="eager"或JS预占位：img { display: block; min-height: 300px; }
安卓WebView和旧版Safari需降级兜底
部分Android WebView（如UC、QQ内置）和iOS 14以下Safari对will-change支持不稳，强行加可能引发卡顿甚至白屏；而低端设备连translateZ(0)都会增加内存压力。
- 优先检测环境：
@supports (will-change: transform) and (transform: translateZ(0))再启用合成层方案 - 降级方案：改用
background-image: url(data:image/svg+xml;base64,...)嵌入简单线性渐变SVG，兼容性拉满且无GPU精度问题 - 极端情况（如低端Android 6.x）可完全放弃CSS渐变，用Canvas动态绘制并
toDataURL()转成base64背景图
真正难处理的从来不是“怎么写渐变”，而是滚动中容器尺寸、合成层生命周期、颜色空间三者在不同引擎里的隐式耦合——尤其是当你发现加了will-change反而更卡时，大概率是伪元素没配inset: 0，或者父容器还挂着overflow: hidden在偷偷裁剪合成层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
