旧版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) 这类透明色支持极弱，会把无法解析的值当成黑色渲染，直接触发黑块，和断层是两回事，但常被混淆。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 完全放弃
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 里又不生效，结果还是黑
