CSS属性shape-outside在Chrome生效但Safari失效求助

问题背景 #

CSS属性shape-outside在Chrome中能正常实现文本环绕SVG图片的效果，但在Safari中完全失效；移除图片的负左外边距后文本可以环绕，但布局效果不符合需求。

解决方案 #

核心是替换负margin的偏移方式，避免干扰Safari的形状计算逻辑，同时添加Safari专属兼容属性：

修改后的CSS代码 #

.oligosacharid-container {
  overflow: hidden;
  display: block;
}

.oligos-img {
  min-width: 75%;
  float: left;
  /* 用transform替代负margin，不破坏布局流 */
  transform: translateX(-43%);
  position: relative;
  shape-outside: url(https://cdn.shopify.com/s/files/1/0809/8955/2985/files/Anyatej.svg?v=1712226356);
  shape-margin: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  /* 强制Safari识别SVG透明区域 */
  shape-image-threshold: 0;
}

关键调整说明 #

1. 替换负margin为transform：负margin会让元素脱离正常布局流，Safari计算shape-outside时会忽略容器外的部分；transform: translateX()仅做视觉偏移，不改变元素的布局盒模型，形状计算不受影响。
2. 添加shape-image-threshold：强制Safari以0透明度阈值识别SVG形状，确保只基于不透明区域生成文本环绕路径。
3. 备选兼容方案：若仍有问题，可提取SVG的路径代码，改用shape-outside: path('你的SVG路径代码')，这种方式对Safari的兼容性更稳定，避免URL引用SVG的潜在适配问题。

修改后效果 #

调整后，Safari中的文本会和Chrome一致，沿着SVG的不规则形状环绕，同时保持图片的偏移布局。

内容的提问来源于stack exchange，提问作者Peter Retvari