旧版iOS Safari(9–11)需精准兼容:ES6+须用Babel转译并配置ios: "10.3"/safari: "10.1",启用箭头函数、解构插件;flex布局优先用-webkit-box;fetch需polyfill+显式Content-Type;input事件改用composition事件;禁用background-attachment: fixed。

旧版 iOS Safari(特别是 iOS 9–11)对 HTML5 新特性支持有限,直接用现代前端框架或 ES6+ 语法大概率白屏或报 SyntaxError: Unexpected token 'const' 这类错误。核心解法不是“降级所有代码”,而是精准拦截不兼容点并替换为等效兼容写法。
ES6+ 语法必须转译,但 target 不能只设为 es5
iOS 10 Safari 支持 let 和 const,但不支持箭头函数默认参数、解构赋值的某些形式,更不支持 async/await。Babel 配置里仅设 targets: { esmodules: true } 或只配 es5 都会出问题。
- 推荐配置:
targets: { ios: "10.3", safari: "10.1" }(覆盖 iOS 10.3 内置 Safari 10.1) - 必须启用
@babel/plugin-transform-arrow-functions和@babel/plugin-transform-destructuring,哪怕你写了es5target,Babel 默认不转译解构赋值 -
async/await必须搭配@babel/plugin-transform-async-to-generator+regenerator-runtime,且 runtime 要在入口最前import 'regenerator-runtime/runtime'
Flex 布局在 iOS 9–10 上的 display: flex 失效问题
iOS 9.3 及更早版本中,display: flex 在某些嵌套场景下完全不生效,尤其是父容器用了 position: absolute 或设置了 min-height 时。
- 优先用
display: -webkit-box替代(iOS 7+ 全支持),配合-webkit-box-orient: vertical和-webkit-box-flex: 1 - 避免在 flex 容器上同时写
height: 100%和min-height,iOS 9 会忽略 height;改用flex: 1或固定高度 - 如果必须用标准 flex,请加
display: -webkit-flex和display: flex双声明,且确保父元素有明确高度(不能靠内容撑开)
fetch API 在 iOS 9–10.2 中无响应或 Promise 不触发
iOS 9.0–10.2 的 fetch 存在严重 bug:POST 请求带 body 时可能卡住,或 catch 不捕获网络错误,甚至返回空 Response 对象。
立即学习“前端免费学习笔记(深入)”;
- 不要依赖原生
fetch,统一用whatwg-fetchpolyfill(注意:它不修复 iOS 10.2 的 POST body bug) - 关键修复:POST 请求必须显式设置
headers: { 'Content-Type': 'application/json' },否则 iOS 9–10.2 会静默失败 - 超时控制必须自己实现(
fetch本身不支持 timeout),用Promise.race([fetch(...), new Promise(...)])包一层
Webkit 内核特有的 CSS 和 JS 行为差异
旧版 Safari 对 will-change、backdrop-filter、IntersectionObserver 等完全不支持,但更隐蔽的问题是 CSS 动画卡顿和 input 事件延迟。
-
input事件在 iOS 9–10 中对中文输入法不触发,改用compositionstart/compositionend监听组合过程 - 避免在
:active伪类中写复杂动画,iOS 9 渲染线程容易卡死;用touchstart/touchend手动切 class 更稳 -
background-attachment: fixed在所有旧 iOS Safari 中失效且引发滚动错乱,必须改用 JS 模拟视差
真正麻烦的不是某个 API 不支持,而是多个“半支持”特性叠加后行为不可预测——比如 flex + transform + will-change 在 iOS 10.1 上可能让整个页面失焦。上线前务必在真机(非模拟器)上跑通 iOS 9.3、10.3、11.4 三档系统。










