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 渐变的裁剪优化逻辑。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 主元素只保留 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 这类写法会被整条忽略，背景回退为透明，看起来也像“黑块”或空白。

• 必须双写：先写 -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) 必须写在伪元素上，写在父容器上没用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！