Safari ≤15.3 完全忽略 aspect-ratio 属性，解析阶段即跳过；15.4+ 支持但斜杠语法不稳定，推荐用小数如 aspect-[0.5625]；@supports 不可用作降级，须先写 padding-top 等 fallback；Flex/Grid 容器中 aspect-ratio 失效，仅对 block/inline-block 元素生效。
aspect-ratio 在 Safari ≤15.3 中被完全忽略
Safari 15.3 及更早版本（包括 iOS 15.3 及之前所有 iOS/macOS 版本）压根不识别 aspect-ratio 这个属性，不是“渲染异常”，而是解析阶段就跳过整条声明——DevTools 的 Styles 面板里那行 CSS 可能被标为 invalid 或直接不显示，Computed 面板里也搜不到该属性。Chrome ≤87、Edge ≤18、微信 X5 内核等同理。
Safari 15.4 是分水岭，但斜杠语法仍不稳定
即使升级到 Safari 15.4+，aspect-[9/16] 这类斜杠写法在 Vite/HMR 热更新、某些 Webpack 构建或 SSR 场景下仍可能静默失效。实测更稳的写法是小数：aspect-[0.5625]（即 9 ÷ 16），CSS 层面完全等价，且 Safari 15.4+ 解析可靠。动态拼接时必须先算好数值再注入，别用字符串拼 "aspect-[" + w + "/" + h + "]"。
@supports (aspect-ratio: 1/1) 在旧 Safari 中毫无意义
@supports 语法本身在 Safari ≤15.3 中也不被支持（Safari 15.4 才开始支持），所以整块规则会被跳过，fallback 样式根本不会执行。不能靠它兜底。真正有效的降级必须写在外部、无条件生效：先写 padding-top: 56.25% + position: relative + absolute 内容层，再用 @supports 覆盖为 aspect-ratio，顺序反了就全崩。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Flex/Grid 容器会让 aspect-ratio 彻底失效
这不是兼容性问题，而是布局优先级冲突：aspect-ratio 只对 display: block 或 inline-block 元素生效。如果父容器是 flex 或 grid，子项默认是 display: flex 或 display: grid，此时 aspect-ratio 直接被浏览器忽略。典型表现：外层 flex 里加了 aspect-video，子元素高度塌陷。临时验证可加 block 强制覆盖，但长期方案得改结构或退回 padding-top 方案。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的是混合场景：比如一个用了aspect-[0.5625] 的卡片，又嵌在 CMS 输出的 flex 容器里，还要求响应式换行——这时你得一层层 inspect 上级盒模型，确认有没有隐式的 height: 100%、flex: 1 或 display: inline 干扰，而不是只盯着那个类名。 
