mix-blend-mode 对 <video> 失效主因是硬件加速层隔离；需检查 transform/will-change/overflow 等触发合成层的属性，改用 contain: paint、isolation: isolate 或 canvas 中转方案，并结合 Layers 面板与 about:config 验证。
mix-blend-mode 对 <video> 元素不生效？先看是否被硬件加速层隔离
mix-blend-mode 在 <video> 上失效，常见原因不是写错了值，而是视频元素被浏览器强制提升为独立合成层（composited layer），导致它和背景/其他元素不再处于同一 stacking context。此时混合被“锁死”在视频自身图层内，无法与外部内容交互。
典型现象：Chrome / Firefox 中视频区域显示正常，但叠加的文字或 SVG 图标用了 mix-blend-mode: screen 却完全没反应；Safari 下甚至整个混合区域变黑或闪烁。
- 检查是否对
<video>或其父容器加了transform: translateZ(0)、will-change: transform或opacity: 0.99—— 这些都会触发隐式 GPU 加速，切断混合链 - 避免给
<video>的直接父级设overflow: hidden，它会裁剪掉混合所需的渲染上下文扩展区 - 如果必须启用硬件加速（比如防卡顿），改用
contain: paint替代will-change，它更轻量且不强制新建合成层
Firefox on macOS 视频混合失效？确认是否触发了渲染路径降级
Firefox for macOS（尤其 104+）对 <video> + mix-blend-mode 的支持存在特定限制：当视频使用 accelerated 解码路径时，混合会被绕过；而 fallback 到软件解码后，又因缺乏 alpha 通道支持导致混合结果异常（如全白或全黑）。
- 临时验证：在 Firefox 地址栏输入
about:config，搜索media.hardware-video-decoding.enabled，设为false测试是否恢复混合 —— 若恢复，说明是硬解与混合的兼容性冲突 - 生产环境不要禁用硬解，改用
<canvas>中转：用requestVideoFrameCallback抽帧 → 绘制到 canvas → 对 canvas 元素应用mix-blend-mode（注意 canvas 创建时传{ alpha: true }） - 别依赖
video { mix-blend-mode: ... }直接写法，Firefox 目前仍将其视为实验性组合，不保证跨版本稳定
想让文字/图标和视频混合？绕过 video 元素本身，换到兄弟层级操作
mix-blend-mode 只在**同层叠上下文内的相邻层之间生效**。<video> 天然创建 stacking context，所以直接给子元素（如 <div class="overlay">）设混合模式，往往只跟 video 的 poster 或 controls 混合，而不是视频画面本身。
立即学习“前端免费学习笔记（深入）”；
- 结构上把要混合的内容提到与
<video>同级：<div class="video-container"> <video></video> <div class="title" style="mix-blend-mode: screen;">Hello</div> </div>
- 给
.video-container加isolation: isolate，确保容器不意外截断混合链 - 确保
.title没有设置background-color或backdrop-filter—— 任何不透明遮罩都会挡住视频画面，混合就只剩“文字和纯色背景”了
Safari iOS 视频混合闪屏或消失？检查是否漏了合成层激活条件
iOS Safari（15.4+）要求参与 mix-blend-mode 的元素必须位于**主动合成层**，否则回退到 CPU 渲染，混合直接不计算。而 <video> 默认不一定满足该条件，尤其在 position: sticky 或滚动容器中。
- 强制激活合成层：给
<video>加transform: translateZ(0)（仅 iOS Safari），但必须配合isolation: isolate在父容器上，否则会引发 stacking context 冲突 - 避免在 video 父级用
filter或opacity < 1—— iOS Safari 对这类组合的处理极不稳定，容易整层丢帧 - 测试时打开 Web Inspector → Elements → 选中 video 元素 → 查看右侧 “Layers” 面板，确认它是否出现在独立图层中；若没有，说明混合必然失效
<video> 的兼容性不是“开或关”的二值问题，而是取决于**当前渲染管线中是否存在未声明的合成层隔离点**。调试时别只盯着 CSS，得结合 Layers 面板和 about:config 参数交叉验证。 
