Safari 15.4+ 支持 offset-path 但限制严格：仅支持 path() 函数、拒绝 url(#id)，命令字母必须大写、坐标间空格不可省略，椭圆弧命令 A 不支持，且需显式声明 will-change: offset-distance 防卡顿。

offset-path 在 Safari 中支持晚且限制多，不是延迟上线，而是实现策略保守

Safari 15.4+ 才开始支持 offset-path，不是“等不及”，而是 Apple 对 CSS Motion Path 的解析逻辑做了严格限定：只认 path() 函数、拒绝 url(#myPath)、命令字母必须大写、空格不可省略。它不追求兼容性妥协，而是选择“全对或全错”——写错一个空格，整个属性被静默丢弃，DevTools 里 offset-path 值显示正常，但 computed style 为空，元素不动。

Safari 路径字符串写错的三个典型表现

你写的路径在 Chrome 里跑得好好的，Safari 却没反应，大概率是以下任一情况：

• path("m0,0 l100,0") —— 小写命令（m/l）不被识别，必须全大写：path("M 0 0 L 100 0")
• path("M0,0C50,50,150,50,200,0") —— 缺少空格分隔坐标，Safari 解析失败；正确写法：path("M 0 0 C 50 50 150 50 200 0")
• path("M0,0 A10,10,0,0,1,100,0") —— 椭圆弧命令 A Safari 完全不支持，哪怕 Chrome 能跑也得删掉或转成贝塞尔近似

为什么 Safari 不支持 url(#id) 引用？

Safari 明确不支持 offset-path: url(#myPath) 这种引用方式，即使 SVG 存在且语法合法，也会被忽略。这不是 bug，是 WebKit 的设计决策：避免跨 DOM 上下文解析路径带来的性能与安全不确定性。Chrome 和 Edge 支持该写法，但 Safari 用户占比高时，这条路直接堵死——你只能把路径硬编码进 path() 字符串里，还得确保单行、无单位、无换行。

offset-distance 动画卡顿，Safari 需要额外加 will-change

在 Safari 中，仅靠 @keyframes + offset-distance 很容易卡顿，尤其路径含贝塞尔曲线时。这不是渲染能力不足，而是 Safari 默认不为 offset-distance 启用 GPU 加速。必须显式加：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

element {
  will-change: offset-distance;
}

注意：will-change: transform 不起作用，只有 offset-distance 有效；Chrome 不需要这句，加了反而可能触发多余重绘。

真正麻烦的不是“Safari 支持晚”，而是它把路径语法校验放在渲染前最前端——错一个字符就放弃整条路径，且不报错、不警告。调试时别信 DevTools 的样式面板，要看 computed style 里的 offset-path 是否真实存在值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！