ios safari ≤13.3 不支持 background-size: cover，会静默退化为 auto，导致背景图缩在左上角或拉伸变形；必须用 padding-bottom + aspect-ratio + 伪元素降级实现居中裁剪，且 background-position 必须写为 center center。
background-size: cover 在 iOS Safari ≤13.3 根本不生效
它不会报错，也不会警告，而是静默退化为 background-size: auto。你写的 cover 就像没写一样——这不是你漏了前缀，加 -webkit-background-size: cover 也无效，引擎级不识别。
典型现象：背景图缩在左上角一小块、或被强行拉伸变形；根本不是“拉伸”，是浏览器压根没执行等比缩放逻辑，只按原始尺寸渲染，又没容器高度参照，视觉上就崩了。
- 必须放弃
cover在老 Safari 中的幻想，哪怕 Autoprefixer 加了前缀也没用 - 真机测试时，iOS 13.3 及更早版本（包括 iPhone 6s、7、8、X 等主力机型）全部中招
- Can I Use 显示“支持” ≠ 实际可用，这是 WebKit 历史遗留实现缺陷，不是配置问题
用 padding-bottom + aspect-ratio 降级保底
核心思路是：不用 background-size 控制缩放，改用容器自身尺寸锚定宽高比，再把背景图塞进去居中裁剪。
兼容写法必须三者同时存在：
- 容器设
position: relative+padding-bottom: 56.25%（16:9）或对应比例值 - 伪元素
::before绝对定位占满，设background-image+background-position: center center+background-repeat: no-repeat - 图片本身不设
height，靠父容器 padding 撑出空间，伪元素继承该区域
示例关键片段：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.hero { position: relative; width: 100%; padding-bottom: 56.25%; }
.hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("bg.jpg"); background-position: center center; background-repeat: no-repeat; }
background-position 写成 center center，别只写 center
单写 background-position: center 在部分 iOS Safari 和安卓 WebView 中会解析为 center 0% 或 50% 0%，导致图片垂直方向卡在顶部，人物直接被切掉半张脸。
center center 是显式声明水平+垂直居中，兼容性更稳，且能规避某些内核对简写 fallback 的歧义处理。
- 尤其当背景图主体（如人脸、LOGO）不在画面正中时，可进一步微调：用
background-position: 50% 30%把图像纵向 30% 处对齐容器顶部 - 避免像素值（如
20px 40px），响应式下完全失控；百分比或关键词更可靠 - 如果设计师强调“人脸绝对不能被切”，
cover就不该是首选——此时换background-size: contain+background-color填白更稳妥
横竖屏切换和软键盘弹出时背景闪动/跳变
这不是背景图被拉伸，是容器高度突变导致重绘异常。Safari 对 vh 单位在地址栏收放、软键盘弹起时会动态重算，min-height: 100vh 可能瞬间缩水，背景区域跟着塌陷。
- 优先用
min-height: 100dvh（需检查是否支持，iOS 16+ 才稳定） - 更通用方案：用固定高度（如
min-height: 500px）+ 媒体查询兜底，或 JS 监听resize动态设置style.height - 广告 SDK 注入的容器常覆写
height或插入!important，直接干掉你的背景规则——真机调试时务必检查 computed styles 是否被覆盖
老 Safari 的背景图问题，本质是容器尺寸不可控 + 属性被静默忽略。修复重点不在“怎么写 cover”，而在“怎么绕过它失效”。降级方案看着啰嗦，但上线后真机跑通率远高于硬扛前缀或 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
