mix-blend-mode颜色异常源于浏览器底层色彩处理差异：safari对rgba(0,0,0,0)残留灰阶致difference溢出青灰噪点，firefox用srgb-linear而chrome/safari用srgb导致overlay明暗不一，android 4.4–6.0 webview未实现该特性致computed恒为normal。
mix-blend-mode 在不同浏览器出现颜色异常，不是 CSS 写错了，而是混合计算路径、色彩空间或 alpha 处理不一致导致的 —— 你看到的“颜色不准”，其实是像素级公式在不同引擎里跑出了不同结果。
为什么 Chrome 看着正常，Safari 却发灰/发青？
根本原因不在 mix-blend-mode 本身，而在它依赖的底层色彩处理：
- Safari（尤其 iOS 15.x 及更早）对
rgba(0,0,0,0)的 alpha=0 渲染残留极微弱灰阶像素，mix-blend-mode: difference计算反色时就会溢出成青灰噪点 - Firefox 默认用
srgb-linear空间做混合，Chrome 和 Safari 用srgb，同一组mix-blend-mode: overlay在深色图上会呈现不同明暗过渡 - Android WebView 4.4–6.0 根本没实现混合逻辑，
computed值恒为normal，但样式仍被解析，导致你误以为“生效了”
mix-blend-mode + rgba() 背景在 Safari 中颜色偏移怎么修？
mix-blend-mode 不作用于自身 background-color: rgba()，但 Safari 会把该 rgba 层参与合成前的预乘（premultiplied）过程搞错，尤其 alpha
- 把
rgba(0,0,0,0)改成rgba(0,0,0,0.01)，避开 Safari 对全透明的异常处理 - 避免用浮点误差值如
0.45000000000000007，某些旧 Safari 会重排或丢精度 - 若背景是
linear-gradient+rgba()叠加再混，必须真机测深色/浅色两种背景——Safari 渲染偏差会被放大
如何让 multiply/screen/overlay 在各浏览器视觉一致？
别指望靠改一个属性值拉齐，得从输入源头控制：
- 所有图片必须保留 Alpha 通道，PNG 不要转成 JPG；SVG 与 PNG 混用在旧安卓上会渲染出纯黑/纯白块
- 用
background-blend-mode: overlay替代mix-blend-mode: overlay（仅限 Chrome 35+/Firefox 30+/Safari 7.1+），兼容性稍好但 iOS 8.x 仍可能闪烁 - 最稳方案：放弃运行时混合，用
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg")静态模拟multiply效果
@supports 检测 mix-blend-mode 为啥反而让颜色更不可控？
@supports (mix-blend-mode: multiply) 只检测声明是否被解析，不验证是否真正参与混合计算。Android 6.0 WebView、iOS 8.x Safari 都会返回 true，但渲染恒为 normal。
- 绝不能用它做关键视觉逻辑开关（比如文字可读性依赖
screen提亮） - 服务端优先识别 UA 中的
iOS 8.、Android 4.4、WebView等关键词，直接下发 fallback 样式 - 真机测试必须覆盖三星/华为旧机型（Android 4.4–6.0）、iOS 8.x Safari、macOS Safari 7.1 —— 这些环境的颜色异常无法靠 devtools 模拟
颜色异常的本质，是混合模式把浏览器引擎的实现差异直接暴露成了视觉 bug。越想靠调参抹平，越容易掉进 Safari 的 alpha 边界陷阱或 Firefox 的线性空间坑里。静态渐变替代 + 服务端 UA 切换，才是可控的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
