Safari中clip-path坐标偏移是因content box原点受padding、transform等干扰，且需box-sizing: border-box、禁用object-fit与clip-path共用、%单位依赖父容器明确宽高；polygon必须顺时针闭合、至少3点，path()须全整数坐标并加硬件加速。
因为 Safari 的 clip-path 渲染管线对坐标精度、单位一致性、渲染上下文要求更严格，错位不是随机 bug，而是解析失败或坐标系偏移的明确信号。
clip-path 坐标在 Safari 中为什么偏移
Safari 默认以元素 content box 左上角为原点，但一旦父容器有 padding、transform: scale()、perspective 或未设 box-sizing: border-box，坐标基准就会悄悄偏移。尤其当元素本身用了 object-fit: cover（如头像图）或 background-size，视觉内容和裁剪坐标完全脱节。
- 必须显式写
box-sizing: border-box，否则padding会把路径原点往内推 - 避免对
<img>直接加clip-path+object-fit: cover—— 两者冲突，图像位置不可控 - 用
%单位时，父容器必须有明确width和height，否则50%计算结果为0px - 调试技巧：先套一个标准矩形
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)确认基准，再改点
Safari 中 polygon() 坐标顺序反了就错位
它不会报错，也不会留白，而是把“该显示的区域”当成“该裁掉的区域”——看起来像整体错位或消失。Safari 对顶点顺序更敏感，逆时针和顺时针混用、自相交路径（比如五角星）都可能触发非预期裁剪。
- 统一用顺时针顺序：
polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) - 少于 3 个点无效；交叉路径顶点超过 20 个时，低端 iOS 设备滚动易卡顿
- Chrome DevTools 中删掉最后一个点再补回去，能强制重绘并暴露方向问题
- 做斜角、气泡箭头这类小图形，先手绘草图标出顶点编号，再按序写，别凭感觉
path() 在 Safari 中错位的根本原因
Safari 16.4+ 才真正支持 path()，且对亚像素极其敏感：任何小数坐标（如 250.5）、混用单位（M10px,20%）、未闭合路径（缺 Z）都会导致边缘发虚、区域偏移，甚至静默忽略整条声明。
Kibana Saved Objects
下载
通过 REST API 管理 Kibana 保存的对象（仪表板、Lens 可视化等）。适用于：① 以编程方式创建、更新、删除仪表板和 Lens 可视化。
立即学习“前端免费学习笔记（深入）”；
- 所有坐标必须为整数，例如
M0,0 Q250,-60 500,0，而非Q250.5,-60.2 - 不能直接把 CSS 的
path("M0,0")字符串复制进 SVG 的d属性——要删引号、括号，规范空格/逗号，写成d="M 0 0" - 必须加
backface-visibility: hidden或transform: translateZ(0)触发硬件加速，否则抗锯齿失控 - 优先用
Q（二次贝塞尔）而非C（三次），Safari 对C控制点插值更易出错
为什么 Safari 上 clip-path 显示正常但点击区域错位
裁剪同步影响视觉区域和事件响应区域，这是规范行为。Safari 尤其严格：被裁掉的部分连 :hover 都收不到，更别说 click。这不是样式错位，是交互坐标也跟着裁了。
-
pointer-events: all无效；伪元素（::before）同样被裁，无法逃逸 - 正确做法：把
clip-path移到子元素上，父容器保持完整可交互（例如父div无裁剪 +position: relative，子<img>加clip-path） - 需要精确点击（如箭头、标签角）时，放弃
clip-path，改用overflow: hidden+ 绝对定位子元素模拟形状 - 或换用
mask-image（Safari 15.4+ 支持），它只影响视觉，不干扰事件
最棘手的是 Safari 的渲染缓存和坐标系偏移叠加——改完一个值，得清缓存、检查父级缩放、验证单位一致性，三者缺一不可。
