isolation: isolate 不是混色开关，仅创建层叠上下文边界以限制 mix-blend-mode 作用范围；必须加在块级或定位的直接父容器上，配合 position 和 z-index 才生效，否则混合仍会穿透至 body 背景或兄弟元素。
isolation: isolate 不是“混色开关”，它只划边界；加了它，mix-blend-mode 才真正被限制在容器内部，否则混合会穿透到 body 背景、导航栏甚至 footer —— 尤其在移动端和 Safari 中更明显。
为什么 mix-blend-mode 总是混错地方？
默认情况下，mix-blend-mode 在整个层叠上下文中生效。一个设了 mix-blend-mode: screen 的浮层，不仅和正下方的图片混合，还会继续向下穿透，跟父容器背景、顶部导航栏、甚至 的浅灰背景一起算颜色 —— 这就是“背景污染”。常见诱因包括：
- UI 框架给根容器悄悄加了
opacity: 0.99或transform: translateZ(0)，提前创建了嵌套上下文 - iOS Safari 对
position: fixed元素自动建上下文，导致弹窗内混合意外和页面底部混合 -
backdrop-filter和mix-blend-mode共存时，若没隔离，颜色计算互相干扰
给谁加 isolation: isolate？加在哪？
必须加在要隔离混合行为的「直接父容器」上，不是加在带 mix-blend-mode 的子元素本身。例如：
- 错误：写
.highlight-text { isolation: isolate; }——isolation对 inline 元素无效，且不作用于已定位子元素 - 正确：写
.editor-content { isolation: isolate; }，其中.editor-content是div[data-slate-editor]或div.ql-editor这类 wrapper 节点 - 该容器必须是块级（
display: block/flex/grid）或已定位（position: relative等），否则声明被忽略 - 别加在
或全局 layout 容器上 —— 那等于把整个页面变成一个“大结界”，混合范围反而失控
为什么加了 isolation: isolate 混合还是不对？
根本原因不是属性失效，而是它只创建新上下文，不改变容器自身在外部的层级位置。如果该容器没定位、z-index 是 auto，它在外部默认处于第 0 层，内部所有混合都只能在这个“低洼地”里发生。
立即学习“前端免费学习笔记（深入）”；
- 必须同时加
position: relative（或其他定位值）和显式z-index（如z-index: 100） - 用 Chrome DevTools 的 «Layers» 面板确认节点是否显示为 “Stacking Context Root”
- 检查祖先是否有
opacity: 0.99、filter: blur(0)或will-change: transform—— 这些会把你的隔离容器包进更外层上下文，失去隔离意义 - Safari 14 及更早需前缀：
-webkit-isolation: isolate；永远别写isolation: on或isolation: true
isolation: isolate 和 opacity/transform 触发上下文的区别
老办法如 opacity: 0.99 或 transform: translateZ(0) 确实也能建上下文，但副作用明显：
-
opacity: 0.99让子元素继承透明度，影响可访问性，还可能让文字边缘模糊 -
transform: translateZ(0)强制 GPU 合成，在 Safari 中易与will-change冲突，滚动时字体发虚 -
isolation: isolate零视觉变化、零性能扰动，语义清晰，只干“划界”这一件事
真正容易被忽略的是：它不提升层级，只定义范围 —— 你得同时管好“容器自己在哪一层”和“容器里面谁在上面”，这两层 z-index 是解耦的，漏掉任一层都会让混合看起来“没反应”。
