mix-blend-mode 在 Android 4.4–6.0 和 Safari 7–8 中根本未实现，是引擎缺失而非写法错误；Android WebView 裁剪了 Blink 的解析逻辑，Safari 7–8 的 -webkit 前缀行为异常甚至崩溃；@supports 检测不可靠，computed 值恒为 normal；必须用多层 background-image + rgba 渐变静态模拟，并提供单层 fallback。
mix-blend-mode 在 Android 4.4–6.0 和 Safari 7–8 根本没实现
不是你写错了，是浏览器引擎里压根没这行代码。Android WebView 4.4–6.0 基于裁剪版 Blink，mix-blend-mode 解析逻辑被直接删了；Safari 7–8 虽有 -webkit-mix-blend-mode，但行为异常，甚至导致图层崩溃。@supports (mix-blend-mode: multiply) 在 Android 6.0 WebView 中可能返回 true，但 computed 值始终是 normal，页面毫无反应。
别浪费时间调 isolation 或 transform——那些是给“已实现但被截断”的场景用的，这里连入口都没加载。
- 必须提供单层 fallback：
background-image: url("fallback.jpg");放最前面 - 用多层
background-image+rgba()渐变静态模拟效果，例如：background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg"); - PNG 图必须保留 Alpha 通道，否则渐变叠加会失效
移动端混合失效主因是 stacking context 被意外隔离
iOS Safari 和 Android WebView 对层叠上下文极度敏感。只要混合元素的**直接父容器**加了 opacity: 0.99、filter: blur(1px)、transform: translateZ(0) 或 position: sticky，就会隐式创建新 stacking context，让子元素只能跟那个透明背景混合——结果就是什么也看不到。
典型踩坑点：backdrop-filter 卡片、轮播容器的 translateZ(0)、带 z-index 的 relative 容器。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：在混合元素的**直接父容器**上加
isolation: isolate - 用 Chrome DevTools → More Tools → Layers 面板确认是否被单独分层
- 避免同时使用
mix-blend-mode和opacity，后者会强制创建 stacking context 并拖慢性能
mix-blend-mode + overflow: hidden 冲突的本质是像素通路被截断
overflow: hidden 提前裁剪渲染上下文，而 mix-blend-mode 需要访问被裁剪区域外的完整像素才能计算混合结果。两者硬凑一起，要么裁剪失效，要么混合消失。
常见错误：.blend-wrapper { overflow: hidden; transform: translateZ(0); } —— 此时 overflow 形同虚设，因为 GPU 图层有自己的绘制边界。
- 结构上分离职责：外层容器设
overflow: hidden，内层容器设isolation: isolate+position: relative - Chrome/Firefox 中可用
clip-path: inset(0)替代overflow: hidden，它与混合模式兼容更好 - 绝对不要给
<video>或其直接父级设overflow: hidden，会破坏混合通路
视频元素上 mix-blend-mode 失效是因为被锁进独立合成层
<video> 天然触发合成层，导致它和外部内容不在同一 stacking context。此时给子元素（比如 <div class="overlay">）设 mix-blend-mode，只跟 poster 或 controls 混合，而非视频画面本身。
Firefox macOS 还有硬解路径冲突问题：media.hardware-video-decoding.enabled 开启时混合常被绕过。
- 结构上把要混合的内容提到与
<video>同级，而非嵌套在内部 - 生产环境改用
<canvas>中转：用requestVideoFrameCallback抽帧 → 绘制到canvas（创建时传{ alpha: true }）→ 对canvas应用mix-blend-mode - 避免对
<video>直接写mix-blend-mode，Firefox 目前仍视其为实验性组合
