旧版 Safari（iOS 15.3 及更早）不支持 isolation 属性，需加 -webkit-isolation 前缀且置于标准声明之前；Android 4.4–6.x WebView 完全忽略该属性；isolation 仅对定位或块级元素生效，且受祖先层叠上下文干扰，须用 Layers 面板验证是否真正创建了堆叠上下文根。
旧版 Safari（iOS 15.3 及更早）不支持原生 isolation 属性
根本不是写法错，而是浏览器根本不认识 isolation: isolate 这个声明。iOS 15.4 才开始支持标准语法，此前所有版本（包括 iOS 14、iOS 13）必须靠前缀才能触发行为。
实操必须加前缀，且顺序不能错：
-
-webkit-isolation: isolate必须写在isolation: isolate前面，否则旧 Safari 会忽略整条规则 - 只写
isolation: isolate在 iOS 15.3 及更早机型上等于没写，DevTools 里也看不到 “Stacking Context Root” 标记 - 不要用
@supports (isolation: isolate)检测——旧内核连这个语法都解析不了，直接跳过整个 CSS 块
Android 4.4–6.x WebView 完全忽略 isolation 声明
这些系统自带的 WebView 内核（基于旧版 Blink/WebKit）压根不实现 isolation 属性，既不创建层叠上下文，也不报错，静默失效。
典型现象：mix-blend-mode 在 Android 5.1 的微信内置浏览器里完全不混合，背景变黑或纯白，加了 isolation: isolate 也没反应。
立即学习“前端免费学习笔记（深入）”；
- 不能依赖 isolation 实现混合隔离，得换 fallback 方案：用
background-image: linear-gradient模拟视觉效果 - 若必须用混合，需配合
@supports (mix-blend-mode: multiply)+@supports (isolation: isolate)双重检测，但注意 Android 4.4 WebView 连@supports都不支持，得用 JS 特性检测兜底 - 避免把 isolation 当“开关”用——它只是创建上下文的手段，在不支持的环境里，整个混合逻辑就得从设计层降级
祖先元素提前创建 stacking context 导致 isolation 失效
即使写了 -webkit-isolation: isolate，如果它的某个祖先已经触发了层叠上下文（比如 opacity: 0.99 或 transform: translateZ(0)），那这个 isolation 就被包进去了，变成“套娃上下文”，无法影响外层混合范围。
- 在旧机型上尤其敏感：Chrome 56 及更早、iOS Safari ≤ 14 对
transform和opacity的上下文触发更激进，transform: scale(1)都可能锁死隔离效果 - 用 DevTools 的 «Layers» 面板确认：目标容器是否真显示为 “Stacking Context Root”；如果不是，说明它被更外层的上下文吞掉了
- 修复不是删 isolation，而是清理祖先：逐级检查
html、body、根 wrapper 是否有transform、opacity < 1、filter—— iOS Safari 对html { transform: translateZ(0) }特别敏感，会导致整个页面成一个大结界
isolation 加在非块级或未定位元素上被浏览器忽略
这个限制在旧机型上更严格：isolation: isolate 只对已定位（position: relative/absolute/fixed）或块级（display: block/flex/grid）元素生效。加在 span、div 但 position: static 上，旧内核直接跳过解析。
- 错误示例：
.blend-item { isolation: isolate; }——.blend-item是 inline 元素或未设 position，无效 - 正确做法：加在它的直接父容器上，且该容器必须满足条件，例如：
.hero-section { position: relative; isolation: isolate; -webkit-isolation: isolate; } - Vue/React 动态渲染时容易漏掉
position：class 切换后，CSS reset 可能让父容器回退到position: static，导致 isolation 失效
