iOS Safari动画元素消失或跳变，根本原因是缺少最近已定位祖先导致坐标系计算失败；必须为动画元素的直接父容器显式设置position: relative，z-index和backface-visibility在此场景无效。
直接加 will-change: transform 或盲目补 -webkit- 前缀，大概率让 iOS Safari 更卡、更闪、更丢帧——这不是兼容性问题，是渲染机制被误触发。
为什么 iOS Safari 动画会突然消失或跳变
常见现象：绝对定位元素执行 transform: rotateY() 时“闪一下就没了”，或动画中途元素直接不可见。根本原因不是 CSS 写错，而是 Safari 渲染引擎找不到“最近的已定位祖先”，导致坐标系计算失败，元素被临时剔出渲染树。
- 必须为动画元素的**直接父容器**显式设置
position: relative（哪怕它原本没定位需求） -
z-index或backface-visibility: hidden在此场景下无效，别白费力气 - 若父容器已是
position: absolute或fixed，需确认它自身有明确的定位上下文（比如它的父级也设了position: relative） - Safari 16.3+ 已缓解，但 iPadOS 16.2 及更早版本仍普遍踩坑
border-image 在 iOS 上四边都生效怎么办
你只写了 border-left: 3px solid，但 border-image 仍会作用于全部四边——iOS WebKit 解析逻辑和桌面 Chrome 不一致，它不尊重单侧 border 声明。
- 必须先用
border: 0彻底清空所有边框，再单独声明需要的边 - 不能只写
border-top: 0; border-right: 0; border-bottom: 0，iOS 仍可能漏清 - 示例修正：
border: 0; border-left: 3px solid; border-image: linear-gradient(red, blue) 1; - 这个模式在 iOS 15–17 全系验证有效，比 JS 动态 patch 更可靠
overflow + border-radius 导致动画残影或跳帧
当容器同时设了 overflow: hidden 和 border-radius，iOS Safari 会强制回退到软件渲染，will-change 失效，CSS 动画直接掉帧甚至不触发。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：移除外层容器的
overflow: hidden，改用clip-path裁剪（如clip-path: inset(0 0 0 0 round 12px)） - 若必须用
overflow: hidden，则禁止子元素使用transform动画，改用opacity或filter: blur()等不触发合成层变更的属性 - 避免
setTimeout控制动画时机——iOS 对
真正难的不是写对一行 CSS，而是判断哪一层该加 position: relative、哪一层该砍掉 overflow: hidden、哪条边框声明其实正在悄悄污染 border-image。iOS 渲染链路短，容错低，每个看似无关的声明都可能成为压垮帧率的最后一根稻草。
