safari 14–16.4需加-webkit-isolation: isolate且必须置于isolation: isolate之前；父容器须有position和z-index，否则隔离无效；单独使用isolation不触发裁剪，必须与overflow: hidden配合。
isolation: isolate在Safari中不生效，先确认是否用了旧版前缀
Safari 15.4 之前版本（尤其是 iOS 15.4–16.4）不支持原生 isolation: isolate，浏览器会直接忽略该声明。这不是 bug，是标准落地的时间差问题。
必须补上 WebKit 前缀才能触发：
.modal-overlay {
-webkit-isolation: isolate;
isolation: isolate;
}
注意：-webkit-isolation 必须写在 isolation 之前，否则现代浏览器可能因解析顺序跳过前缀；Safari 17+ 已可省略前缀，但兼容 iOS 16.x 仍需保留。
父容器没定位，isolation: isolate等于没写
isolation: isolate 创建的是层叠上下文，但这个“上下文根”自身若没参与外层堆叠排序，整个隔离块就卡在默认层级（z-index: 0），子元素再高的 z-index 也出不来。
常见错误写法：
.dropdown-menu { /* 没有 position */
isolation: isolate;
}
.dropdown-menu > .item {
position: relative;
z-index: 999; /* 无效：父没定位，上下文根无外部高度 */
}
正确做法是给隔离容器本身加定位和明确层级：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
position: relative（或absolute/fixed）必须存在 - 显式设置
z-index，比如z-index: 100 - 避免祖先元素已有
opacity: 0.99或transform—— 它们会提前创建上下文，把你的isolation包进更外层的“套娃”里
DevTools里看不到新层叠上下文？检查 computed 样式和 display 类型
Chrome 的 «Layers» 面板或 Safari 的 «Elements» → «Computed» 中搜 stacking context，如果没标出“isolated”，说明声明未被识别。原因常是：
- 目标元素是
display: inline或inline-block——isolation对非块级/非定位元素无效 - 父元素被
pointer-events: none或visibility: hidden覆盖，导致子元素不可见也不可交互，但控制台不报错 - 写了
isolation: on或isolation: true—— 只有isolate是合法值，其他全被静默丢弃
快速验证：临时加 background: red 和 border: 1px solid 到隔离容器，看它是否渲染——不渲染，说明样式根本没生效，优先排查 CSS 优先级或拼写。
iOS Safari 中 overflow + border-radius 失效，isolation 不是万能解药
在 iOS 上，isolation: isolate 常被用来修复 border-radius + overflow: hidden 对子元素裁剪失败的问题，但它必须和 overflow: hidden 同时存在才起作用。
单独写：
.card {
border-radius: 12px;
isolation: isolate; /* ❌ 无效：没 overflow，不触发裁剪边界对齐 */
}
正确组合：
.card {
border-radius: 12px;
overflow: hidden;
isolation: isolate; /* ✅ 缺一不可 */
}
真正复杂的地方在于：它不提升层级，只定义范围；而 iOS 渲染管线对“上下文边界”和“裁剪边界”的对齐极其敏感——哪怕多一层未察觉的 will-change: transform 祖先，都可能让 isolation 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
