Safari 15.4前及Android 6.x WebView不支持isolation: isolate，需加-webkit-isolation前缀并确保元素为定位块级容器；旧版Android需降级用z-index创建层叠上下文。
老版本 Safari 和 Android WebView 中 isolation: isolate 直接被忽略，不是写错了，是根本没实现——必须加前缀、改写法，或降级为更兼容的方案。
为什么 Safari 15.4 之前完全不认 isolation: isolate
这个属性在 Safari 15.4（对应 iOS 15.4）才开始原生支持；此前所有版本（包括 Safari 14、iOS 15.3 及更早）会静默跳过该声明，连 DevTools 的 Computed 面板里都搜不到它。Android 6.x 及更早的系统 WebView 更彻底：连 -webkit-isolation: isolate 都不识别。
- 检查方式：打开 Safari DevTools → Elements → Computed → 搜索
isolation，若无结果，基本可判定版本不支持 - 不能靠用户代理字符串硬判断，iOS 15.3 和 15.4 的 UA 几乎一样，得靠特性检测（见下文）
- 别指望
@supports (isolation: isolate)在旧 Safari 中生效——它本身就不支持@supports检测该属性
-webkit-isolation 必须前置且仅对定位块级容器有效
加前缀不是“锦上添花”，而是旧版 Safari 唯一能识别的方式；但顺序和使用条件极其严格：
-
-webkit-isolation: isolate必须写在isolation: isolate之前，否则 Safari 15.4+ 会读取后声明而跳过前缀，旧版又看不到后声明——两边全挂 - 目标元素必须是
display: block、flex或grid，且已设position: relative（或absolute/fixed），position: static下声明无效 - 别加在
<span>、<button>这类默认 inline 元素上，哪怕写了display: block，也得确认 computed 值已生效
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.modal-footer {
-webkit-isolation: isolate;
isolation: isolate;
position: relative;
z-index: 100;
}
Android WebView 低于 7.0 的降级策略
Android 6.x（API 23）及更早的 WebView 对 isolation 完全无感，此时强行加前缀也没用。稳妥做法是放弃隔离，改用更底层但兼容的层叠控制：
- 用
position: relative; z-index: 0显式创建层叠上下文（比transform: translateZ(0)更安全，无文字发虚、GPU 卡顿风险） - 确保父容器没有
opacity、filter或will-change，否则仍会提前触发隐式上下文 - 若需模拟
mix-blend-mode隔离效果，把混合元素和目标背景拉到同一 DOM 层级，用兄弟结构替代嵌套
例如避免这样写：
.card { opacity: 0.99; }
.card .title { mix-blend-mode: multiply; }
改为：
.card-bg { background: url(...); }
.card-content { position: relative; z-index: 1; }
.card-bg, .card-content { position: absolute; top: 0; left: 0; }
真机测试时最容易被忽略的三个点
即使代码写对了，在 iOS/Safari 真机上仍可能失效，原因往往藏在 DOM 结构或框架行为里：
- iOS Safari 对
position: fixed元素自动创建层叠上下文，所以弹窗类组件别直接给fixed容器加isolation，应改用position: absolute+ 父容器position: relative - 第三方 UI 库（如 Vant、Ionic）常在根容器悄悄加
transform: translateZ(0)或opacity: 0.99，导致你的isolation被“套娃”进外层上下文——用 DevTools 右键目标节点 → «Show stacking context» 查看是否真成了根节点 -
isolation: isolate必须加在**直接父容器**上，隔一层就失效；比如按钮结构是<div class="wrapper"><div class="btn-group"><button></button></div></div>，就得加在.btn-group，而不是.wrapper
