mix-blend-mode 在移动端“不生效”本质是 stacking context 被意外隔离，需在混合元素直接父容器设 isolation: isolate；推荐用 multiply、screen、overlay，避开 color-dodge 等高危值，并保持结构扁平、避免重绘。
mix-blend-mode 在移动端“不生效”其实是 stacking context 被意外隔离
不是属性写错了，也不是 iOS 或安卓 WebView 不支持——而是只要混合元素的任意上级容器触发了新层叠上下文（stacking context），mix-blend-mode 就只能跟那个“透明隔离背景”混合，结果就是文字全黑、全白或直接看不见。
典型肇事场景包括：transform: translateZ(0)（轮播常用）、backdrop-filter: blur(4px)（毛玻璃卡片）、opacity: 0.99（哪怕只是 0.99）、甚至 position: relative; z-index: 1（看似无害的弹窗 wrapper）。
- 必须在混合元素的直接父容器上加
isolation: isolate，不能加在 body 或更外层 -
isolation: isolate不改变布局，只告诉浏览器：“请把这层当独立混合单元，别让它被上游 context 隔离” - 如果父容器本身已有
transform或filter，isolation: isolate仍需显式声明，它不会被自动继承
哪些 mix-blend-mode 值在移动端最稳，哪些该立刻避开
别贪全，iOS 16.4 之前 plus-lighter 完全不支持；hard-light 在 Safari 有偏色；exclusion 和 color-burn 在部分安卓 WebView 会渲染成纯黑或全白。
- 推荐首选
multiply：深色背景+浅色文字时安全，白色变透明，黑色保留 -
screen是镂空文字首选：黑色变透明，适合视频/动图背景上的文字穿透效果 -
overlay最省心：自动根据底色切换multiply或screen，渐变或复杂图上不易丢对比度 - 绝对避开
color-dodge：遇到黑色区域直接过曝成全白，深色主题下 UI 瞬间崩坏
文字与背景图融合的最小可靠结构
结构越扁平越稳，别套多层定位或 wrapper。想让文字“挖空”露出背后图片或视频，关键就三行 CSS：
.bg-container { isolation: isolate; }
.bg-container img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.text-hollow { mix-blend-mode: screen; color: #000; }
-
.bg-container必须是文字的直接父级，且自身要有可见背景（图片、渐变或视频） - 文字颜色必须用纯黑（
#000）或纯白（#fff），中间灰度值（如#666）会导致混合不可控 - 不要给文字加
background-color（除非是 rgba 半透），否则会遮挡底层，混合失效 -
background-blend-mode对文字无效——它只管背景层，不管文字、::before或子元素
性能卡顿的真实原因和绕过方式
mix-blend-mode 触发的是整块区域的全像素重绘，不是局部更新。哪怕只是 top: 1px 动画，浏览器也要把整个 blend 区域重新合成，比纯 transform 慢一个数量级。
- 避免在滚动区域（
overflow: scroll容器）里启用mix-blend-mode - 禁用在高频动画中（如轮播切换、Tab 切换过渡）动态开关该属性
- 如果必须动效，优先用
transform+opacity替代位置/颜色变化，再配合will-change: transform提前提示 - 真机测试时重点看 Safari 的帧率：开启「Web Inspector → Rendering → Paint flashing」，红色闪烁越频繁，重绘压力越大
真正麻烦的不是写法，而是混合区域是否被上游容器悄悄切断，以及你有没有在不该动的地方动了像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
