mix-blend-mode 动画失效主因是 stacking context 隔离或属性不可动画；需确保同层叠上下文、避免隐式创建隔离层，改用 opacity 或 class 切换模拟动效，并注意 Canvas alpha 设置与 will-change 冲突。
mix-blend-mode 动画失效？先确认元素是否在同一个 stacking context
动效里 mix-blend-mode 看起来没反应，大概率不是写错了值，而是被 stacking context 截断了。混合模式只在**同层叠上下文内的兄弟元素之间生效**，一旦父容器加了 transform、opacity、filter 或 will-change，就可能创建新 stacking context，把子元素“锁死”在里面，无法和背景或其他区域混合。
- 检查触发动画的元素及其父级：有没有无意中加了
transform: translateZ(0)或filter: blur(1px)？这些都会隐式创建 stacking context - 想让某层和页面背景混合，它必须和
或其他基准层处于同一 stacking context —— 通常意味着要避免给它的任意祖先设position: relative+z-index，除非你明确控制整个层级链 - 临时调试技巧：给疑似“隔离”的父容器加
isolation: isolate，强制它不参与混合（反而能帮你定位哪一层切断了混合链）
transition 或 animation 中修改 mix-blend-mode 值无效？别直接 animating 它
mix-blend-mode 是**非可动画属性**（CSS Transitions spec 明确列出它不可插值），浏览器不会平滑过渡 multiply → screen，只会突变。但你可以用间接方式实现视觉上的渐变效果。
- 改用
opacity动画控制叠加层的可见性，再配合固定 blend mode：比如一个background-image层设mix-blend-mode: overlay，再用opacity从 0 到 1 过渡，视觉上就像 blend mode “淡入” - 对需要切换模式的场景，用
@keyframes配合animation-fill-mode: forwards+ JS 控制 class 切换，而不是指望 CSS 自己 interpolate - 注意 Safari 对
mix-blend-mode在will-change: transform元素上的支持不稳定，动画中同时启用两者容易闪屏或失效
Canvas + mix-blend-mode 混合渲染时颜色发灰？混合前先关掉 canvas 的默认 alpha 合成
Canvas 绘制内容默认带 alpha 通道，当它作为 mix-blend-mode 的参与方时，会先和自身透明度做一次预合成，再和底层混合，导致颜色饱和度下降、对比变弱 —— 尤其在 multiply 或 darken 模式下特别明显。
- 在
canvas.getContext('2d')后立刻设置：ctx.globalCompositeOperation = 'source-over'（确保初始状态干净） - 关键一步：创建 canvas 时显式关闭 alpha：
const canvas = document.createElement('canvas'); canvas.getContext('2d', { alpha: false });—— 这能让 canvas 内容以 opaque 方式参与混合，结果更锐利 - 如果必须保留 alpha（比如要绘制半透明粒子），那就别用
mix-blend-mode直接套 canvas 元素，改用两层 canvas：底层 render 到 offscreen canvas（alpha: true），顶层用drawImage把它画到主 canvas（alpha: false）再设 blend mode
滚动视差中 mix-blend-mode 出现闪烁或重绘异常？慎用 will-change 和 contain
在滚动驱动的混合动效中（比如文字随背景图 blend 变化），浏览器为了性能常加 will-change: transform 或 contain: layout paint，但这两种优化和 mix-blend-mode 天然冲突：GPU 加速层会提前合成，破坏跨层混合所需的像素级实时计算。
立即学习“前端免费学习笔记（深入）”；
- 移除所有对混合元素及其祖先的
will-change—— 即使是will-change: opacity也可能触发分层，打断混合流程 -
contain: paint会让元素“自我封闭”，混合完全失效；contain: layout虽不直接禁用混合，但会阻止浏览器正确估算混合区域，造成裁剪或错位 - 替代方案：用
transform: translateZ(0)强制硬件加速，但仅用于最外层容器，且确保该容器不参与任何混合运算；真正做 blend 的元素保持普通文档流
混合模式的动效本质是像素级实时计算，不是 CSS 属性动画那种声明式流程。越想压榨性能做的优化，越容易切掉它依赖的渲染通路。留出一层“不优化”的混合层，往往比强行加速更稳。
