Firefox（截至128版）不支持offset-path和offset-rotate，相关CSS被完全忽略，需用transform+requestAnimationFrame或GSAP fallback；path()语法须严格空格分隔，Safari尤其敏感；offset-distance卡顿主因是曲率不均与线性插值，推荐cubic-bezier缓动。
offset-path 在 Firefox 里根本不起作用
直接告诉你结论：Firefox（截至 128 版）明确标记为 Not planned，不支持 offset-path，也不支持 offset-rotate。你写的 offset-path: path("M0,0 L100,100") 在 Firefox 中完全被忽略，元素静止不动，不是写错了，是压根没实现。
常见错误现象：offset-distance 动画在 Chrome/Safari 正常，在 Firefox 打开页面后元素卡在原位；DevTools 的 computed 面板里看不到 offset-path 生效痕迹。
- 必须 fallback：用
transform+requestAnimationFrame手动插值，或引入 GSAP 的motionPath插件 - 不要指望加前缀解决——Firefox 连实验性标志都没开，
-moz-offset-path无效 - 若项目需全浏览器兼容，建议把
offset-path当作“增强层”，核心逻辑用 JS 实现
path() 字符串里空格和逗号不能省
Safari 对 SVG 路径语法的解析比 Chrome 更严格。写 path("M10,10C20,20,30,20,40,10")（无空格）可能渲染失败或路径错位；而 path("M 10 10 C 20 20, 30 20, 40 10")（带空格+逗号）才稳定生效。
使用场景：从在线工具（如 svg.wxeditor.com）导出路径后，务必检查并补全空格——尤其 C、S、A 指令前后。
立即学习“前端免费学习笔记（深入）”；
-
M和坐标之间要有空格：M 10 10✅，M10,10❌（Safari 可能拒解析） -
C指令中控制点与终点间用逗号分隔：C 20 20, 30 20, 40 10 - 避免混用语法：不要在同一个
path()里既用空格又用逗号不一致的写法
offset-distance 动画卡顿不是性能问题，是插值逻辑
offset-distance 本身不触发重排，但视觉卡顿往往来自路径曲率不均 + 线性 timing-function。CSS 按路径总长度做等距采样，但人眼感知的是速度变化——拐弯处曲率突变时，等距 ≠ 等速观感。
实操建议：
- 优先用
cubic-bezier(0.33, 1, 0.68, 1)替代ease或linear，它在终点减速，能掩盖折点抖动 - 绝对不要用
steps()：offset-distance不支持逐帧步进，写了也无效 - 路径含尖锐折线（如
path("M0,0 L100,0 L100,100")）时，加offset-rotate: auto，否则元素方向不会随切线转向
起始位置偏移？先查路径原点是否“干净”
写完 offset-path 发现元素没从路径起点开始动，或者 offset-distance: 0% 没对准 M 坐标？大概率是路径字符串自带不可见偏移——比如从设计稿导出的 SVG 路径含 viewBox 或 transform，但 CSS 的 path() 不继承这些，纯按绝对坐标计算。
调试方法：
- 用 SVG 元素内联渲染同一路径，加
stroke和fill="none"直观比对起始点 - 调用
getTotalLength()和getPointAtLength(0)确认路径起点坐标 - 路径太复杂时，手动简化：删掉冗余控制点、合并相近坐标、用
Q替代部分C指令降低点数（建议控制在 50 个点以内）
真正容易被忽略的点：路径定义本身是“黑盒”，offset-path 不报错也不警告，只默默失效或偏移——得靠 SVG 渲染对照才能定位问题根源。
