如何修复CSS渐变在旧版Safari浏览器上的颜色断层问题？

旧版Safari渐变灰黑断层是16-bit色深限制所致，需用伪元素+translateZ(0)启用高精度合成层，并弃用rgba/hsla、改用transparent或8位hex，双写-webkit-linear-gradient（裸方向词）与标准语法。

旧版Safari里linear-gradient出现灰黑断层，根本不是颜色写错了

这是 Safari（iOS 12 及更早、Safari 6–12）GPU 渲染路径默认用 16-bit 色深处理渐变导致的物理限制——尤其当两个颜色明度接近（如#f5f5f5→#ffffff）时，中间过渡被硬截成几十个离散阶跃，最暗那几阶在视觉上就显出灰黑“阴影”。它不是 bug，但必须绕开。

用伪元素 + translateZ(0)强制启用高精度合成层

直接在元素上写 background: linear-gradient() 是断层重灾区；换成 ::before 伪元素承载渐变，并提升为独立合成层，才能绕过 Safari 对纯 CSS 渐变的裁剪优化逻辑。

• 主元素只设 position: relative 和 background: transparent，不写任何渐变
• 伪元素必须有 content: ""、position: absolute、inset: 0（别用 top/left/width/height）
• 必须加 transform: translateZ(0) —— iOS 必加，否则合成层不生效；部分 Android WebKit 也建议同时加 will-change: transform
• 渐变声明写在伪元素上，方向关键词照常使用（to bottom 等），无需降级语法

别用 rgba() 或 hsla()，改用 transparent 或 8 位 hex

旧版 Safari（尤其是 iOS 12 及更早）对 rgba(0, 0, 0, 0.3) 这类透明色支持极弱，会把无法解析的值当成黑色渲染，直接触发黑块，和断层是两回事，但常被混淆。

• 完全放弃 rgba() 和 hsla()：它们在 iOS 12 Safari 中大概率让整条渐变失效
• 透明色统一用 transparent 关键字：所有支持 linear-gradient 的浏览器都无条件支持
• 若需控制灰度深浅，用 8 位 hex：#0000004D（等价于 rgba(0,0,0,0.3)），但注意 iOS 12 仍不支持，得配降级
• 降级必须写在前面：background-color: #fff; background-image: linear-gradient(to right, #000, transparent);，不能靠 @supports 包裹——旧 Safari 根本不识别这个规则

双写 -webkit-linear-gradient 且方向必须用裸关键词

仅加前缀还不够，旧 WebKit（iOS 5.1–6.1 / Safari 5.1–6）根本不识别 to right，只认 right、bottom 这类裸方向词，写错就整条忽略，背景回退为透明或父级色。

立即学习“前端免费学习笔记（深入）”；

• -webkit-linear-gradient() 第一个参数只能是 left/right/top/bottom，不能带 to 前缀
• 角度写法反直觉：-webkit-linear-gradient(90deg, ...) 实际等效于向上（to top），不是向右，别混用
• 正确双写顺序：background-image: -webkit-linear-gradient(right, #000, transparent), linear-gradient(to right, #000, transparent);
• 千万别把前缀写在后面：linear-gradient() 会覆盖 -webkit-linear-gradient()，而前者在旧 Safari 里又不生效，结果还是黑

伪元素方案和颜色格式降级必须同时做，漏掉任一环节，断层或黑块就可能复现。旧版 Safari 的渲染路径太特殊，没有“通用解”，只有组合兜底。