mix-blend-mode 在移动端失效的根本原因是层叠上下文被意外隔离，解决方法是在混合元素的直接父容器上设置 isolation: isolate；推荐使用 multiply、screen、overlay 等兼容性好的混合模式，并避免在滚动区域或动画中滥用以保性能。
mix-blend-mode 在移动端不是“不能用”，而是**一加就黑/白/消失/卡顿**——根本原因是层叠上下文被意外隔离，不是写法错，也不是兼容性差。
为什么 mix-blend-mode 在 iOS/Android 上突然失效
不是浏览器不支持，是 Safari 和主流安卓 WebView 对 stacking context 极度敏感。只要混合元素的任意上级容器触发了新层叠上下文，mix-blend-mode 就只能跟那个“透明隔离背景”混合，结果就是全黑、全白或完全不可见。
-
transform: translateZ(0)、backdrop-filter: blur(4px)、opacity: 0.99都会创建新 stacking context -
position: relative; z-index: 1这种看似无害的写法，也常在卡片/弹窗中意外切断混合链 - 轮播组件、Tab 切换容器、Modal 外层 wrapper 是高频“肇事者”
解决方法只有一条：在混合元素的**直接父容器**上加 isolation: isolate。它不改变布局，只告诉浏览器：“请把这层当独立混合单元，别让它被上游 context 隔离。”
哪些 mix-blend-mode 值在移动端最稳
别贪全，iOS 16.4 之前不支持 plus-lighter，hard-light 在 Safari 有偏色，exclusion 和 color-burn 在部分安卓 WebView 渲染为纯黑或全白。
立即学习“前端免费学习笔记（深入）”；
-
multiply：深色背景+浅色文字/图形时安全，白色变透明，黑色保留 -
screen：镂空文字首选，黑色变透明，适合视频/动图背景上的文字穿透效果 -
overlay：自动根据底色切换multiply或screen，文字在渐变或复杂图上最不易丢对比度 - 慎用
color-dodge：遇到黑色区域直接过曝成全白，深色主题下 UI 瞬间崩坏
实现文字镂空效果的最小可靠结构
想让文字“挖空”露出背后的视频或 GIF？别套多层定位，结构越扁平越稳。
<div class="bg-container"> <video autoplay muted loop></video> <h1 class="text-hollow">HELLO</h1> </div>
CSS 关键三行：
.bg-container { isolation: isolate; }
.bg-container video { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.text-hollow { mix-blend-mode: screen; color: #000; }
- 必须给
.bg-container加isolation: isolate，不能加在body或更外层 - 文字颜色设为纯黑（
#000）或纯白（#fff），避免中间灰度值导致混合不可控 - 不用
position: absolute文字，否则容易触发新 stacking context；靠父容器position: relative+z-index控制层级更稳妥
性能卡顿的真实原因和绕过方式
mix-blend-mode 触发的是整块区域的**全像素重绘**，哪怕只是 top: 1px 动画，浏览器也要把整个 blend 区域重新合成，比纯 transform 慢一个数量级。
- 绝对不要对带
mix-blend-mode的元素做top/left动画，改用transform: translateY() - 避免在滚动区域（如
overflow-y: scroll容器）内大面积使用，iOS 下极易掉帧 - 复杂交互动效（如鼠标跟随）优先用
difference模式 + 单色光标，它计算简单、响应快，且天然适配深浅背景自动反色
真正难的不是写出效果，是判断哪里该加 isolation: isolate、哪里该砍掉一层 opacity、以及哪类混合模式在低端安卓机上会直接渲染失败——这些细节不试到真机，文档里根本不会写。
