Safari中SVG foreignObject内position:absolute定位异常如何修复

安全阿岳

2026-9-26

问题原因

Safari 对 <foreignObject> 内部嵌套网格布局时的绝对定位上下文计算存在已知渲染bug，会出现开发工具计算位置和实际渲染位置不一致的情况，是浏览器本身的渲染逻辑缺陷导致。

可落地的修复方案

方案1：补全定位上下文链路
给没有自定义类的中间父元素显式添加position: relative属性。Safari在场景下不会自动传递定位上下文，需要给absolute元素的直接父级也设置相对定位，才能保证定位基准正确。
修改后的父元素行内样式：
```
height: 60px;
max-width: 144px;
position: relative;
```

方案2：强制触发Safari重渲染
给占位符元素添加transform: translateZ(0)属性，触发GPU渲染，强制浏览器重新计算元素的渲染坐标，90%以上的同类Safari渲染错位问题都可以通过这个方法修复。
修改后的占位符样式：

.sst-editor__placeholder {
  position: absolute;
  color: #bfc8d0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  top: 0;
  left: 0;
  border: red solid 1px;
  pointer-events: none;
  /* 新增Safari兼容代码 */
  transform: translateZ(0);
}

方案3：规避绝对定位实现
如果以上两个方案都无效，可以直接放弃绝对定位实现层叠效果，改为用网格布局的同区域层叠特性：
给祖父元素.sst-editor__container添加grid-template-areas: "stack"，同时给占位符元素和实际编辑区元素都设置grid-area: stack，两个元素会自然层叠，完全规避下的绝对定位bug。