移动 Safari 上的 CSS 剪辑路径就像内容框一样答案

【问题标题】：CSS clip-path on mobile Safari acts like content-box移动 Safari 上的 CSS 剪辑路径就像内容框一样
【发布时间】：2019-06-08 18:01:54
【问题描述】：

我有一个用clip-path 切割并有一些背景颜色的容器。在支持clip-path 但移动版 Safari（可能也是桌面版 Safari，无法测试）的所有浏览器中都能完美运行。

https://codepen.io/Deka87/pen/PXVNgQ

HTML：

<!-- Container -->
<div></div>

<!-- Clip -->
<svg>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
    </clipPath>
  </defs>
</svg>

CSS：

div {
  min-height: 300px;
  background-color: gray;
  padding: 100px 0;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

Safari 中的问题是，当应用clip-path 时，容器的背景就像它的background-clip 属性设置为content-box 一样，即它不会在填充的后面，所以这些区域保持空白。

任何帮助将不胜感激。

【问题讨论】：

mac 上的 Safari 看起来和 mac 上的 chrome 一样。
@Huangism，感谢您的评论。这是否意味着填充会影响背景大小？
实际上我收回了这一点，100px 的填充没有出现在 safari 中，而是出现在 chrome 上，在 mac 上
所以只能是移动版的Safari。

标签： html css svg

【解决方案1】：

我刚刚遇到了同样的问题，并且能够通过向被剪裁的元素添加一个额外的包装 div 并将填充移动到子元素中来解决它。这不是真正的修复，但让我继续前进。

HTML：

<!-- Container -->
<div class="parent">
  <div class="child">

  </div>
</div>

<!-- Clip -->
<svg>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
    </clipPath>
  </defs>
</svg>

CSS：

.parent {
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.child {
  background-color: gray;
  min-height: 300px;
  padding: 100px 0;
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

请参见此处的示例： https://codepen.io/mprquinn/pen/8b1e4e6004e989491f294a8899a94ec7

希望这会有所帮助！

【讨论】：