mix-blend-mode 在 Safari 16.4+ 前对 fixed 元素有滚动残留 bug，Chrome/Firefox 较稳但 Android WebView 基本不支持；需用 CSS.supports 检测兼容性；它作用于元素与背后所有内容，而 background-blend-mode 仅限自身多背景混合。
mix-blend-mode 在哪些浏览器里能用
它不是全平台安全的属性，mix-blend-mode 在 Safari 16.4+ 之前对 position: fixed 元素有严重渲染 bug，滚动时会残留图层；Chrome 和 Firefox 支持较稳，但 Android WebView（尤其旧版）基本不支持。如果页面要兼容 iOS 15 或更低设备，得先做特性检测：CSS.supports('mix-blend-mode', 'multiply')，别直接写死。
mix-blend-mode 和 background-blend-mode 的区别
前者作用于**元素自身与它背后的所有内容**（包括父容器、兄弟元素、甚至 body 背景），后者只控制**单个元素内部多个 background 图层之间的混合**。比如给一个带 background-image 和 background-color 的 div 设置 background-blend-mode: overlay，是图和色在自己肚子里混；而 mix-blend-mode: screen 是让整个 div 像玻璃一样，跟它下面所有东西一起混——哪怕下面是个 video 或另一个 canvas。
为什么设置了 mix-blend-mode 却没效果
常见原因有三个：
- 父容器设置了
isolation: isolate—— 这会切断混合上下文，mix-blend-mode需要“穿透”到背后的堆叠上下文才能生效，加了隔离就混不到了 - 元素是
opacity: 0.99或更小值 —— 只要opacity不等于 1，就会强制创建新的层叠上下文，导致混合失效（这是 CSS 规范行为，不是 bug） - 背后内容是
iframe或video—— 大部分浏览器禁止跨源或硬件加速内容参与混合，即使同源，video在某些 Chrome 版本里也默认不参与
mix-blend-mode 的性能代价在哪
它会让浏览器放弃很多图层合并优化，每个启用该属性的元素都可能触发独立合成层（compositing layer），尤其在滚动区域里频繁重绘。实测中，连续 3 个以上 mix-blend-mode: difference 的卡片并排，iOS 上帧率可能掉到 30fps 以下。建议只在静态视觉模块（比如 banner 标题、图标叠加）里用，避开列表项、轮播图、实时 canvas 动画这些高频更新区域。
立即学习“前端免费学习笔记（深入）”；
真正难处理的是混合与 z-index 的交互：一旦用了 mix-blend-mode，元素就不再严格按 z-index 排序混合顺序，而是按文档流+层叠上下文深度综合计算——这时候调 z-index 很可能不起作用，得靠移动 DOM 位置或加 isolation 来间接控制。
