Firefox截至2026年6月仍完全不支持offset-path，标记为“Not planned”，连带offset-distance和offset-rotate均被静默忽略；Safari仅支持大写命令的path()语法，Chrome虽支持最全但需规避浮点误差与曲率突变问题。
Firefox 完全不支持 offset-path，不是 bug 是现状
截至 2026 年 6 月，Firefox（最新稳定版 128）仍标记 offset-path 为 “Not planned”，连带 offset-distance 和 offset-rotate 一并忽略。你写的任何 offset-path: path("M0,0 L100,50") 在 Firefox 的 DevTools 中都会显示为“未应用”或直接灰掉——不是语法错，是浏览器压根不解析该属性。
常见误判：在 Firefox 里看到动画不动，反复检查 @keyframes 和路径字符串，最后发现控制台没报错、computed style 里也看不到该属性——这正是 Firefox 静默丢弃的典型表现。
- 别指望用
@supports (offset-path: path(""))检测后“优雅降级”，Firefox 连这个@supports查询都返回false，但检测本身不会报错 - 若项目必须兼容 Firefox，得提前用 JS 判断
typeof CSS.supports === 'function' && CSS.supports('offset-path', 'path("")')，再切换到transform+requestAnimationFrame或 GSAP 方案 - SVG
<animatemotion></animatemotion>是唯一跨浏览器的声明式路径动画方案，但需把元素转成 SVG 子节点，不适用于纯 HTML 元素
Safari 只认大写 path() 命令，小写或空格缺失直接失效
Safari 15.4+ 虽支持 offset-path，但解析极严格：只接受 path() 函数，拒绝 url(#myPath)；且路径字符串中所有命令字母（M、L、C、Q 等）必须大写，坐标间空格不可省略。
写成 path("m0,0 l100,0") 或 path("M0,0L100,0")，Safari 会静默失败——DevTools 里可能显示属性值，但 computed style 中 offset-path 为空，元素也不动。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
offset-path: path("M 0 0 C 50 50 150 50 200 0")（命令大写、数字间空格保留） - Safari 不支持
path()中的椭圆弧命令A，哪怕 Chrome 能跑，也得绕开 - 避免换行或末尾空格：
path("M 0 0\nC 50 50 150 50 200 0 ")中的\n和尾部空格会导致解析中断
Chrome 中动画卡顿或终点停不准，常因路径定义不当
Chrome 支持最全，但路径写法稍有偏差就会暴露底层渲染逻辑：它按路径总长度做线性插值，而浮点精度和曲率分布会让视觉效果失真。
比如用几十段短直线拼出曲线：path("M0,0 L1,0 L2,0 ... L100,0")，浏览器计算总长时误差累积，导致 offset-distance: 100% 卡在离终点几像素的位置；又或者路径含尖锐折线，offset-rotate: auto 在拐点处转向突兀，看起来像“抖动”。
- 用贝塞尔曲线替代多段直线：
path("M 0 0 C 30 -20 70 -20 100 0")更平滑，GPU 渲染压力也小 - 避免在
@keyframes里用ease或ease-in-out驱动offset-distance，改用cubic-bezier(0.33, 1, 0.68, 1)或linear，否则曲率不均处会明显变速 - 别用
transition控制offset-distance，它不触发合成层优化，动画易掉帧
元素没动？90% 是因为没设 position: absolute
offset-path 不是通用布局属性，浏览器只对 position: absolute 或 position: fixed 的元素启用路径计算。写对了路径、配好了动画，元素却钉在文档流原位——八成是定位没设，或设成了 relative、static、sticky。
更隐蔽的问题：父容器没设 position: relative，导致绝对定位元素以视口为基准，路径起点飘走；或者用了 inset 但没配 position: absolute，inset 被忽略。
- 硬性要求：
position: absolute必须显式写出，不能靠 flex / grid / transform “模拟”定位 - 推荐起始锚点写法：
position: absolute; inset: 0;（比top: 0; left: 0; right: 0; bottom: 0;更简洁且支持逻辑属性） - 若元素是文字，还必须设
display: inline-block或block，display: inline（如默认<span></span>）下offset-path无效
@supports 检测只是第一步，后续的路径写法、定位控制、缓动选择，每一步都得对着各浏览器的解析器特性来调。 
