唯一可控方式是放弃display-p3适配幻想，全链路锁定srgb，用color(srgb)显式声明空间并搭配#rrggbb fallback；因display-p3在srgb屏上会强制映射导致发灰或过饱和，且各浏览器降级策略不一，background-color支持最差，参数必须专业工具转换而非手算。
唯一可控方式是放弃 display-p3 适配幻想，全链路锁定 sRGB，并用 color(srgb) 显式声明空间 + #RRGGBB fallback。
为什么 color(display-p3) 不能用来“适配”P3 屏幕
它不是“让 P3 屏更准”，而是把坐标强行塞进 P3 色域——sRGB 屏无法物理复现，只能就近映射，结果不可控：Dell 笔记本上发灰，旧 iPad 上过饱和。Safari 16.4+ 和 Chrome 111+ 都支持该语法，但降级策略完全不同：color(display-p3 0.98 0.42 0.42) 在旧版 Safari 中会静默跳过整条规则（颜色消失），Chrome 则可能截断或线性压缩。更关键的是，background-color 属性对 color(display-p3) 支持最差，iOS 和部分 Android WebView 会直接回退到 sRGB 输出，毫无预警。
- 别信自动 postcss 插件的“一键转换”——它们常在蓝紫/高饱和绿区域做 clamp，视觉失真明显
-
display-p3参数不能手算：把#FF6B6B拆成1, 0.42, 0.42是错的，那是 sRGB 值，未经色域映射，结果严重发灰 - 必须用 ColorSync Utility、Adobe Photoshop（启用 P3 工作空间）或可信在线工具转出真实
display-p3坐标
如何真正统一 Safari 与 Chrome 的颜色输出
核心不是“让 Safari 走 P3”，而是“让两者都老老实实走 sRGB”。#FF6B6B、rgb(255, 107, 107)、hsl(354, 65%, 68%) 全部隐式绑定 sRGB，但“隐式”不等于“强制”——Safari 在 Display P3 屏上默认把未声明空间的颜色映射进 P3 渲染，Chrome 多数情况坚持 sRGB 输出。所以必须显式写 color: color(srgb 1 0.4196 0.4196);，且搭配降级 color: #FF6B6B;。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
color(srgb)在 Chrome 111+、Safari 16.4+、Firefox 117+ 支持，旧版本直接忽略第二行，fallback 安全 - 数值必须归一化：
parseInt('FF', 16) / 255 ≈ 1，不能写255或100% - 检测必须用
@supports (color: color(srgb 0 0 0))，别用@supports (color: color(display-p3))——后者会让 sRGB 屏过饱和 - 渐变也要同步改：
linear-gradient(to right, color(srgb 1 0.4196 0.4196), color(srgb 0.3059 0.8039 0.7569))
transparent 在 Safari 中根本不是“透明色”
这不是颜色解析问题，而是语义解析差异：border: 1px solid transparent 在 Safari 中被当作“不绘制”，而非“完全透明”，导致边框热区丢失、drop-shadow 截断、backdrop-filter 不触发。这常被误判为“颜色不一致”，实际和色域无关，需单独排查。
- 换成
border: 1px solid rgba(0, 0, 0, 0.001)，实测最小有效 alpha 值，视觉无差别但行为正常 -
rgba(0, 0, 0, 0)和transparent在 Safari 中表现一致，都不可靠，别用 - 这个点常和
color(srgb)、backdrop-filter叠加触发，调试时很难定位根因
真正麻烦的不是某一条规则写错，而是多个 Safari 特定缺陷同时触发：一个用了 color(srgb) 的按钮，又带 backdrop-filter，还设了 border: 1px solid transparent——三个点叠加，视觉崩坏但控制台毫无报错。最容易被忽略的是 transparent 的语义陷阱，它不在色彩空间讨论范围内，却能直接让交互失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
