ios safari中渐变色偏粉或发灰并非颜色写错，而是其默认将未声明色彩空间的hex/rgb()当作display p3解析，chrome/firefox则多走srgb，导致同一linear-gradient插值路径不同；应统一用rgb(255 107 107 / 1)显式锚定srgb，并配@supports检测与fallback。
为什么iOS Safari里渐变色看起来偏粉或发灰
不是颜色写错了，是 Safari（尤其 macOS/iOS 16+）默认把未声明色彩空间的 HEX 或 rgb() 当作 Display P3 解析，而 Chrome/Firefox 多数仍走 sRGB。同一段 linear-gradient(to right, #FF6B6B, #4ECDC4) 在不同浏览器里插值路径完全不同——起始色在 Safari 里可能是 P3(0.98, 0.42, 0.42)，在 Chrome 里是 sRGB(1, 0.42, 0.42)，结果自然不一致。
用 rgb() 显式锚定 sRGB 空间
把十六进制或含 alpha 的 rgba() 全部换成带空格分隔、显式指定色彩空间的 rgb()：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
rgb(255 107 107 / 1)比#FF6B6B或rgba(255,107,107,1)更可靠，它强制走标准 sRGB 渲染管线 - 避免混用：不要在同一渐变里穿插
#FF6B6B和rgb(255 107 107)，旧 Safari 可能对两者解析策略不同 - alpha 值必须用
/ 1形式，不要用逗号分隔——rgb(255, 107, 107, 1)在部分 Safari 版本中会被截断或忽略
加 @supports 并提供 sRGB fallback
color(display-p3) 这类高级语法必须包裹在特性检测里，且 fallback 不能省：
- 必须写
@supports (color: color(display-p3 0 0 0))，否则 Safari 16.4+ 会静默跳过整条规则 - fallback 必须显式写出：
background-color: rgb(255 107 107 / 1);，不能只靠继承或透明 - 渐变也一样：
background-image: linear-gradient(to right, rgb(255 107 107 / 1), rgb(78 205 196 / 1));是安全基线
伪元素 + 合成层修复锯齿，但别漏掉颜色格式
光加 transform: translateZ(0) 和 will-change: transform 不够，如果伪元素里的 background 还在用 rgba() 或 #xxx，iOS 12–15 依然可能渲染黑块或色带：
- 伪元素的
background必须用rgb()或transparent，禁用rgba() - 旧版 Safari（iOS 12 及更早）不支持 8 位 hex（如
#0000004D），必须降级为transparent或纯色 - 方向写法要双保险：
-webkit-linear-gradient(right, ...)+linear-gradient(to right, ...)，前者禁用角度、后者禁用裸关键词
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
