css - 位置为 : relative with SVG clip paths not displaying in Safari 的元素

Question

我有一个网页，我在其中使用应用于该页面的 HTML 元素之一的 SVG 剪辑路径。

SVG 元素:

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path d="M150 0 L75 200 L225 200 Z" />
        </clipPath>
    </defs>
</svg>

应用剪切路径的 HTML 元素

<div id="clipMe"> </div>

定义剪辑的 CSS

#clipMe {
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
    width: 200px;
    height: 200px;
    background-color: red;
}

在同一个页面上，我有各种元素，其中一些元素是相对定位的:

<div style="position: relative">
    <strong>My parent is relative</strong>
</div>

仅在 Safari (8.0.4) 中，只要来自 #clipMe 的链接，这些相对定位的元素就不会显示。 div 到 clipPath(在 SVG 元素内)是完整的。

最新版本的 FF 和 Chrome 按预期显示。

改变 position:除 relative 之外的任何属性都会按预期显示所有内容。

禁用剪切路径(通过一起删除 SVG 元素或从 CSS 中删除 clip-path: 属性)也会按预期显示所有内容。

JSfiddle:

同样，这仅适用于 Safari。我花了一段时间才将其隔离为关于 SVG 剪切路径和 position: relative所以我猜可能还有其他情况会产生类似的结果。

有没有人遇到过这个问题或者有什么建议让那些相对定位的 s 显示出来？

编辑
这可能是 Mac 的事情。虽然它在 OSX 的 Chrome 和 Firefox 中显示正常，但在 iOS 上的任何浏览器中都不会显示相对定位的 DIV。

有什么想法吗？

Answer 1

尝试在剪裁元素上使用 -webkit-transform:translateZ(1px)。如果它没有在移动设备上显示，您可能还需要包含其他前缀。 Demo

它通过将其放在 GPU 上来强制硬件加速(本质上浏览器更注重渲染它)。