纯css无法主动检测或适配屏幕色域，所谓“优雅处理”本质是规避色域切换引发的视觉断层。需用color-mix(in srgb)强制srgb插值、color-gamut: p3媒体查询兜底、固定渐变stop位置、backdrop-filter柔化伪元素边缘，并真机录屏验证。
纯 CSS 无法主动检测或适配屏幕色域（如 sRGB、Display P3、Adobe RGB），所谓“优雅处理”本质是规避色域切换引发的视觉断层，而不是真正在 CSS 里做色域映射。
background-color 过渡在 P3 屏上会发灰？统一用 color-mix() 模拟 sRGB 插值
Display P3 屏幕色域更宽，浏览器对 background-color 的插值仍按 sRGB 坐标系计算，但渲染时直接输出 P3 值，导致中间帧颜色偏淡、发灰。解决思路不是禁用 P3，而是让插值过程“看起来像 sRGB”。
- 别用
hsl(0, 100%, 50%) → hsl(120, 100%, 50%)：HSL 在不同色域下语义不一致，P3 下的 hue 120° 实际覆盖区域更大 - 改用
color-mix(in srgb, #ff0000, #0000ff)配合background-color过渡：强制插值在 sRGB 色空间内进行，再由浏览器映射到当前设备色域 - 必须搭配
color-gamut: p3媒体查询兜底：对仅支持 sRGB 的旧设备，color-mix()会被忽略，退化为原生过渡
linear-gradient() 在 Safari 16.4+ 上突然卡顿？检查 prefers-reduced-motion 和 color stop 写法
Safari 16.4+ 开始实验性支持 background-image 中 color stop 的过渡，但仅当 prefers-reduced-motion: no-preference 且所有 stop 位置固定（如 0%, 100%）时才启用。否则会回退到伪元素方案，造成帧率抖动。
- 错误写法：
linear-gradient(to right, #f00 0%, #0f0 50%, #00f)—— 末尾缺位置，Safari 无法确定是否可插值 - 正确写法：
linear-gradient(to right, #f00 0%, #0f0 50%, #00f 100%)，且外层加@media (prefers-reduced-motion: no-preference) - 别在渐变里混用
rgba()和十六进制：P3 设备对 alpha 通道的插值行为不一致，全用color(display-p3 ...)或全用hex
伪元素叠加方案在 iOS 17+ 上出现边缘闪烁？用 backdrop-filter: blur(0.5px) 柔化交界
当用 ::before 叠加一层渐变并控制 opacity 时，iOS 17+ WebKit 渲染管线会对半透层做独立合成，与主层像素对齐偏差导致微闪。这不是 bug，是 subpixel rendering 的副作用。
- 给伪元素加
backdrop-filter: blur(0.5px)，配合background-clip: padding-box，能模糊掉像素级错位 - 禁用
will-change: opacity：它会让伪元素提前升层，加剧合成冲突 - 确保伪元素
z-index严格为1，不要用auto或负值，避免层叠上下文干扰
真正难处理的不是“怎么写”，而是“怎么验证”——同一段 CSS 在 macOS Safari、iOS Chrome、Android Chrome 上看到的过渡平滑度可能完全不同，因为底层 color management 实现差异太大。上线前务必用真机录屏逐帧比对，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
