iOS Safari ≤ 16.4 完全不支持 content-visibility，必须用 UA 字符串检测而非 @supports；后者在 15.4–16.3 中返回 true 却静默忽略，导致布局错位、滚动跳变，降级需模拟占位而非简单回退 display。
iOS Safari ≤ 16.4 完全不支持 content-visibility，检测必须用 UA 字符串而非 @supports
@supports (content-visibility: auto) 在 iOS Safari 中会返回 true（尤其在 15.4–16.3 版本），但实际行为是静默忽略该声明——样式不生效、不报错、也不触发渲染跳过。这是 WebKit 的已知实现缺陷，不是误配。真正有效的检测方式只有解析 navigator.userAgent。
- 检测逻辑应匹配 Safari 版本号：用正则
/Safari\/[\d.]+.*Version\/16.([0-3]|$)/或更保守地覆盖/Version\/15.([0-3]|$)|Version\/16.([0-3]|$)/ - 不要依赖
'content-visibility' in document.documentElement.style：它在 Safari 15.4+ 返回true，但属性无效 - SSR 场景下无法用 UA 检测？那就默认不启用：服务端初始 HTML 中所有目标元素写
content-visibility: visible，hydration 后再按客户端能力升级
为什么 Safari 不支持？核心是 contain-intrinsic-size 解析逻辑不一致
iOS Safari 对 contain-intrinsic-size 的支持存在断层：15.4 开始识别单值（如 contain-intrinsic-size: 80px），但双值语法（300px / 200px）直到 16.5 才稳定；而 Chrome 122+ 才全面支持双值。更关键的是，Safari 在 content-visibility: auto 下若未正确解析 contain-intrinsic-size，会退化为高度 0，导致：
- 滚动条突然收缩、内容上跳
- footer 上浮、布局错位
-
getBoundingClientRect().height返回 0，JS 尺寸计算失效
这不是“没实现”，而是尺寸占位机制被部分绕过——浏览器以为自己支持，实则漏掉了关键环节。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
检测到不支持后，不能简单加 display: block 降级
很多人看到 Safari 卡顿，第一反应是 JS 切换 element.style.display = 'block'，这反而让性能更差：
立即学习“前端免费学习笔记（深入）”；
-
display: block彻底移除占位，破坏原有布局流，可能触发全局重排 -
content-visibility: hidden和display: none行为不可互换：前者保留 DOM 位置和无障碍树，后者直接剔除 - 真正兼容的降级路径是：
- 用
visibility: hidden+position: absolute模拟占位（需配合 JS 注入height行内样式） - 或改用
IntersectionObserver手动控制visibility: hidden/visibility: visible，并预设容器min-height - 对 SEO/无障碍敏感的长列表，必须保留 DOM 密度，此时
transform: translateY(-9999px)+pointer-events: none比强行 fallback 更可控
- 用
最常被忽略的一点：你在 DevTools 里看到“Safari 支持 content-visibility”，不代表它能跑通整个渲染链路。那个 contain-intrinsic-size 值有没有被真正读取、有没有参与滚动区域计算——得看 Network 面板里滚动是否抖、看 Layout Shift Regions 是否亮起，而不是看 CSS 面板里那行字有没有划掉。
