ios safari 从不支持 标签，因其非 html5 标准且被废弃；应使用 css @keyframes + animation 替代，注意容器约束、linear 时序、足够时长及 will-change: transform 硬件加速。
为什么 <marquee></marquee> 在 iOS 上完全失效
因为 iOS Safari 从一开始就不支持 <marquee></marquee> 标签，它不是 HTML5 标准的一部分，属于已被废弃的非标准元素。哪怕加了 behavior="scroll" 或 direction="left"，在 iOS 上渲染出来就是静止文本，甚至可能被直接忽略或降级为普通 <p></p>。这不是兼容性问题，是根本没实现。
用 CSS @keyframes + animation 替代的实操要点
这是目前最可靠、iOS 全版本（包括 iOS 17+）都支持的方案，但必须注意几个关键控制点：
- 父容器需设固定
width和overflow: hidden，否则动画会撑开容器或溢出不可见 - 滚动元素本身要用
display: inline-block或white-space: nowrap防止换行打断连续滚动 - 动画时长（
animation-duration）不能太短，iOS WebKit 对极快动画（如1s）有帧率限制，建议 ≥8s起步 - 必须加
animation-timing-function: linear，否则默认ease会让首尾明显卡顿
示例片段：
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
如何关闭 iOS 页面滚动对横向动画的干扰
iOS Safari 默认启用「弹性滚动」和「滚动捕捉」，当用户手指横向滑动页面时，容易意外触发 touchmove 阻断、动画暂停，甚至让 transform 动画掉帧。解决方法不是禁用整个页面滚动，而是精准隔离：
立即学习“前端免费学习笔记（深入）”；
- 给滚动文字容器添加
touch-action: none，这会禁止该区域响应任何手势（包括缩放、双击），但保留动画自身运行 - 如果容器内还需点击交互（如跳转链接），改用
touch-action: pan-y，只允许纵向滚动，不影响横向动画 - 避免在该容器上监听
touchstart或touchmove，否则可能触发 iOS 的「非被动事件监听器警告」，导致动画被强制降频
为什么 requestAnimationFrame 滚动方案在 iOS 上反而更难控
虽然 JS 方案理论上更灵活，但在 iOS 上实际落地困难更多：WebKit 对后台标签页、非活跃视口的 requestAnimationFrame 调度非常保守，动画容易卡在 1–2 帧/秒；同时 scrollLeft 操作在 iOS 上性能极差，比 CSS transform 慢一个数量级。除非你明确需要动态控制启停/速度/方向切换，否则没必要绕路写 JS。
真正容易被忽略的是：iOS 上所有滚动动画都依赖 will-change: transform 触发硬件加速，漏掉这句，哪怕用了 transform，在低端 iPhone（如 SE 第二代）上仍可能肉眼可见掉帧。
