截至firefox 128，offset-path与offset-rotate未实现，完全被忽略；需用js模拟（如gsap motionpathplugin）或手动插值降级，禁用@supports检测。
Firefox 里 offset-path 完全不生效，不是写法问题
截至 Firefox 128，offset-path 和 offset-rotate 仍被官方标记为 “Not planned”，连实验性支持都没有。这意味着你写的 path("M0,0 L100,100") 在 Firefox 中会被浏览器直接忽略，样式计算阶段就丢弃，不会报错、也不会 fallback —— 元素就静止在原地。这不是路径语法错、不是没加 offset-distance，是属性压根未实现。
用 transform + requestAnimationFrame 手动模拟路径运动
当 CSS 路径动画不可用时，JS 是最可控的降级方案。核心思路是：把 SVG 路径转成一系列坐标点，再用 requestAnimationFrame 每帧更新元素的 transform: translate(x, y) 和（可选）rotate()。
- 用
path.getTotalLength()和path.getPointAtLength()获取路径上任意比例位置的坐标 - 配合
offset-distance的语义（0% → 100%），把进度映射为长度值传入getPointAtLength() - 若需自动朝向切线方向，调用
path.getTangentAtLength()（注意 Safari 16.4+ 才支持，旧版需自己算导数近似） - 避免在循环中反复调用
getBoundingClientRect()或修改style.left/top，只操作transform
GSAP 的 MotionPathPlugin 是最省心的兼容方案
手动实现坐标插值容易踩精度和性能坑，尤其含贝塞尔曲线的路径。GSAP 的 MotionPathPlugin 内置了对 SVG <path></path> 的完整解析，能跨浏览器一致还原 offset-path 行为，包括 offset-rotate: auto 的切线对齐。
- 引入时确保加载
MotionPathPlugin插件（不是默认内置）：gsap.registerPlugin(MotionPathPlugin) - 动画写法接近 CSS：
gsap.to(el, { motionPath: { path: "#myPath", align: "#myPath" } }) - 它自动处理 Safari 对
path()中空格缺失的容忍度差异（比如"M10,10C20,20,30,20,40,10"在 Safari 可能失败，GSAP 会预标准化） - 比纯 CSS 方案多约 12KB gzip 后体积，但换来的是 Firefox/Edge 17+/IE11 全覆盖
别用 @supports 检测 offset-path，改用特性检测或 UA 判断
@supports (offset-path: path("M0,0")) 在 Firefox 中永远返回 false，看似合理，但它无法区分“不支持”和“语法错误”。更糟的是，某些安卓 WebView（如微信 X5 内核）会假阳性返回 true，结果运行时报 JS 错误。
- 稳妥做法是：先检查
CSS.supports("offset-path", "path('M0,0')")，若为false，立即启用 JS 方案 - 或更激进一点：对已知不支持的 UA（如
navigator.userAgent.includes("Firefox")）直接跳过 CSS 路径逻辑 - 不要在 CSS 中写
@supports not (offset-path: path("")) { ... }来塞降级样式 —— 这类规则在不支持的浏览器里根本不会解析，起不到兜底作用
offset-distance 值来抹平。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
