mix-blend-mode 在多数安卓 WebView 和旧版 iOS Safari 中不支持，需用 isolation: isolate 隔离容器 + linear-gradient 渐变图替代；@supports 检测并提供 fallback 是最稳方案。
mix-blend-mode 在多数安卓 WebView 和旧版 iOS Safari 中不支持，直接使用会导致内容不可见或渲染异常；必须用 isolation: isolate 隔离容器 + 渐变图（background-image: linear-gradient）替代视觉效果。
为什么 mix-blend-mode 在移动端会失效
Android 4.4–6.x 的系统 WebView、iOS Safari ≤ 9.3、以及部分国产浏览器内核（如 UC 12.x、QQ 浏览器 X5 内核早期版本）完全忽略 mix-blend-mode 声明，且不触发回退机制——元素不会降级显示，而是静默失效，常表现为背景“消失”或文字与底色融合为纯黑/纯白。
-
mix-blend-mode: multiply在这些环境里等同于未设置，叠加效果丢失 - 父容器未设
isolation: isolate时，即使新内核生效，也可能因层叠上下文缺失导致混合范围错误 - CSS 动画中混用
mix-blend-mode和transform会触发强制硬件加速，在低端安卓机上引发闪烁或掉帧
用 isolation: isolate 主动创建混合上下文
不是可选项，是启用混合的前置条件：没有它，mix-blend-mode 在支持环境中也可能被父级层叠上下文截断。
- 给应用混合的容器（如
.blend-container）必须显式设置isolation: isolate - 不能只靠
position: relative或z-index替代——它们不创建独立层叠上下文用于混合计算 - 若容器本身是
fixed或absolute定位，仍需加isolation: isolate，否则在 iOS 10+ 上可能混合失效
.blend-container {
isolation: isolate;
background: #fff;
}
.blend-item {
mix-blend-mode: screen;
}
用渐变图替代 mix-blend-mode 的常见场景
当目标是「文字压暗背景」「图标提亮图片」这类视觉效果时，linear-gradient + background-blend-mode（支持度略高）或纯 CSS 渐变覆盖更可靠。
立即学习“前端免费学习笔记（深入）”；
- 替代
mix-blend-mode: multiply（深色叠加）：用半透黑色渐变盖在图片上，再放白字background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...); - 替代
mix-blend-mode: screen（浅色叠加）：用半透白色渐变 +background-blend-mode: overlay（注意：后者兼容性仍弱于纯渐变，慎用） - 图标与图片融合？改用
filter: brightness(1.2) contrast(1.1)模拟，比依赖混合模式稳定得多
检测与渐进增强的最小可行方案
别依赖 JavaScript 特性检测——getComputedStyle(el).mixBlendMode 在不支持环境返回空字符串，但无法区分“未设置”和“不支持”。最稳的是 CSS @supports。
- 写法必须带完整声明：
@supports (mix-blend-mode: multiply)，不能简写为@supports mix-blend-mode - fallback 样式要放在 @supports 外层，确保所有设备都加载；混合样式包在里面
- 真机测试重点：华为 EMUI 4.0（Android 6.0）、iPhone 6s iOS 9.3、小米 MIUI 8 内置浏览器
.caption {
color: white;
text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
@supports (mix-blend-mode: multiply) {
.caption {
mix-blend-mode: multiply;
text-shadow: none;
}
.image-wrap {
isolation: isolate;
}
}
真正麻烦的不是写不出 fallback，而是设计师给的“微透明叠加层”在 iOS 12 上看着正常，到了 Android 8.1 就变成一块实色遮罩——这种差异只能靠真实设备分段截图比对，模拟器没用。
