iOS设备CSS滚动触发动画异常：iPhone14动画失效排查

问题概述 #

基于Intersection Observer实现的滚动触发式技能条动画，在桌面网页、Android设备上运行正常，但在iPhone14等iOS设备上出现异常：技能条进度条闪烁、无法平滑填充，文字与进度条动画不同步。尝试添加CSS -webkit 前缀后问题仍未解决。

核心原因 #

• 误用SVG专属标签<line>：<line>是SVG标准中的图形元素，并非通用HTML标签。iOS Safari对HTML中直接使用的SVG标签兼容性极差，会导致样式解析、动画触发逻辑出现异常——你在右侧技能条中用<line>替代<span>，非iOS浏览器会将其当作普通块级元素处理，但iOS Safari会按SVG元素规则解析，直接导致动画无法正常执行。
• Intersection Observer阈值触发逻辑差异：你设置了threshold: 1.0（要求元素完全进入视口才触发动画），但iOS Safari的视口计算逻辑与其他浏览器不同，结合滚动时的渲染优化策略（如滚动节流、硬件加速机制），会导致元素完全进入视口的判定延迟或不准确，进而让动画触发时机混乱。
• CSS transform兼容性问题：iOS Safari对transform-origin配合scaleX的动画处理有特殊逻辑，若绝对定位元素的transform初始状态未显式定义，容易导致动画起始位置异常；另外未添加will-change: transform提示浏览器提前准备硬件加速，也可能让iOS上的动画出现卡顿或异常表现。
• 动画曲线解析差异：你使用的cubic-bezier(1, 0, 0.5, 1)动画曲线，在iOS Safari中的解析效果与其他浏览器存在细微差别，导致动画速度变化不符合预期，出现视觉上的异常。

补充提示 #

代码中添加了animated1类，但CSS里无对应样式定义，属于冗余代码，建议清理。

内容的提问来源于stack exchange，提问作者user16167303