contain: paint 是移动端最稳妥的起点，ios safari 16.4+ 和 chrome 115+ 中可稳定提升长列表滚动帧率至近60fps；contain: strict 在 ios safari 中会导致 sticky 失效、锚点异常，android chrome 104 以下存在合成层丢失问题；检测 contain-intrinsic-size 是否生效须通过 getcomputedstyle(el).containintrinsicsize 实际读取，而非仅依赖 css.supports()。
contain: paint 是移动端最稳妥的起点
在 iOS Safari 16.4+ 和 Chrome 115+ 上，contain: paint 能稳定切断绘制依赖，滚动长列表帧率可从 20fps 提升至接近 60fps；但 contain: strict 在 iOS Safari 中会导致 position: sticky 失效、锚点跳转异常，Android Chrome 旧版本（如 104 以下）也存在合成层丢失问题。实操时应优先用 paint，仅当需要尺寸隔离时再叠加 size。
检测 contain-intrinsic-size 是否真正生效不能只靠 CSS.supports()
CSS.supports('contain-intrinsic-size', '100px') 返回 true 并不代表渲染有效——Safari 17.4+ 和 Chrome 107+ 支持该语法，但 Firefox 128 仍不支持，且即使支持，也会被 display: grid 或 flex 容器自动忽略。真实验证方式是：
- 创建测试元素：
<div style="contain: size; contain-intrinsic-size: 200px"></div> - 用 JS 读取：
getComputedStyle(el).containIntrinsicSize（注意：JS 属性名是驼峰，非连字符） - 若返回空字符串或
none，说明被父级布局上下文覆盖，需检查是否套在grid-area或flex子项中
contain 值组合必须匹配容器实际行为，否则会静默失效
浏览器对 contain 的执行有隐式前提：没有显式宽高或 contain-intrinsic-size 的 contain: size 会被完全忽略；contain: layout 在 position: absolute 父容器内可能干扰定位基准；contain: style 目前仅 Chrome 115+、Firefox 119+ 支持，且仅在自定义属性需独立计算时才启用。常见失效场景包括：
-
.list-item { contain: content; }→ 若列表项高度由内容撑开且无min-height，content实际等价于none -
.modal { contain: strict; }→ 若 modal 内部用了backdrop-filter，strict会隔离滤镜作用域，导致模糊失效 -
.tooltip { contain: paint; overflow: visible; }→ 溢出部分可能被裁剪，应改用overflow: clip或确保视觉允许截断
降级逻辑必须基于运行时行为，而非 UA 字符串
仅靠 navigator.userAgent 判断是否支持 contain 会漏掉 Safari 17.4+ 的 partial 支持，也误判 Edge 107+。安全降级应分两步：
- 先查基础支持：
CSS.supports('contain', 'paint') - 再做行为验证：创建临时容器，修改子元素
background-color，用performance.mark()+ DevTools 的 “Paint Flashing” 对比重绘区域是否收缩到容器内部
真正容易被忽略的是：contain 不是开关，而是承诺——一旦声明，浏览器就会按该边界做优化决策；如果容器内有 Portal 渲染到 body、Tooltip 悬浮在父外、或依赖 getBoundingClientRect() 获取跨边界位置，contain: paint 可能直接裁掉这些溢出内容，此时必须移除或换用 content-visibility: auto 配合 contain-intrinsic-size。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
