Safari 渲染低对比度渐变时因16位色深限制产生色带（banding），看似黑色阴影；解决方案是用伪元素+translateZ(0)强制启用高精度合成层，避免原生渐变路径。
不是渐变本身产生黑色阴影，而是 Safari 渲染时把低对比度渐变（比如浅灰到白）压缩成有限色阶，视觉上呈现为几条明显的深色分界线——看起来像“黑色阴影”，其实是 banding（色带）。
为什么 linear-gradient 在 Safari 里渲染出深色断层
Safari 的 GPU 渲染路径默认用 16-bit 色深处理渐变，当两个颜色差值小（如 #f5f5f5 → #ffffff）、跨度大时，中间过渡被硬截断成几十个离散阶跃，最暗的那几阶在视觉上就显出灰黑“阴影”感。这不是 bug，是硬件加速通道的精度妥协。
- 典型现象：
background: linear-gradient(to bottom, #f0f0f0, #ffffff)在 iOS Safari 滚动后突然出现 2–3 条清晰灰黑色横纹，Chrome/Firefox 完全平滑 - 跟
box-shadow无关，加filter: blur()或改opacity都无效 - 旧版 WebKit（iOS 15 及更早）尤其严重，iOS 16+ 仍存在，只是触发条件更苛刻
用伪元素 + translateZ(0) 强制启用高精度合成层
直接在元素上写 linear-gradient() 是 Safari 色带重灾区；换成 ::before 伪元素承载渐变，并提升为独立合成层，能绕过其对纯 CSS 渐变的裁剪优化逻辑。
- 主元素只保留
position: relative和透明背景，不写任何background - 伪元素必须设
content: ""、position: absolute、inset: 0（不用top/left/width/height） - 必须加
transform: translateZ(0)或backface-visibility: hidden—— iOS 必加，否则合成层不生效 - 渐变声明写在伪元素上，方向关键词照常使用（
to bottom等），无需降级语法
旧版 Safari（iOS 6 / Safari 6）方向语法兼容问题
如果项目还要支持微信内置 WebView（部分仍基于 iOS 6 WebKit）或企业内网老设备，to right 这类写法会被整条忽略，背景回退为透明，看起来也像“黑块”或空白。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 必须双写：先写
-webkit-linear-gradient(right, #f00, #00f)，再写标准linear-gradient(to right, #f00, #00f) -
-webkit-linear-gradient()的第一个参数只能是left/right/top/bottom，不能带to前缀，也不能写top left - 角度写法在旧 WebKit 里反直觉：
-webkit-linear-gradient(90deg, ...)实际等效于向上（to top），不是向右——别混用
color-stop 显式设置能缓解但不能根除色带
加中间色标（如 #f8f8f8 50%）可让过渡更可控，但无法解决底层精度问题；它只是把断层位置“固定”下来，方便调试，不是修复手段。
- 示例写法：
linear-gradient(to bottom, #f0f0f0 0%, #f8f8f8 50%, #ffffff 100%) - 避免写
transparent或极低 alpha 的rgba()，Safari 对半透明色阶压缩更激进 - 真正起作用的是渲染层策略，不是颜色列表密度；10 个 stop 不如一个
translateZ(0)
最容易被忽略的是：伪元素方案里漏掉 inset: 0 或用 top: 0; left: 0; right: 0; bottom: 0 替代，会导致 Safari 重新走原生渐变路径，色带照常出现；另外，transform: translateZ(0) 必须写在伪元素上，写在父容器上没用。
