具有位置的元素：相对于 SVG 剪辑路径未在 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: 属性更改为相对值以外的任何内容都会按预期显示所有内容。

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

JSfiddle:

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

有没有人运行参与其中或者对显示那些相对定位的 s 有任何建议？

编辑
这可能是 Mac 的事情。虽然它在 Chrome 和 Firefox 在 OSX 中按预期显示，但在 iOS.

的任何浏览器中都不显示相对定位的 DIV。

有什么想法吗？

Answer 1

两件事：

使用css设置display:block；任何 position:relative;
尝试clear:both；任何 position:relative;

我目前没有您用来测试的 safari 版本，但我从以前使用 position:relative 的经验中知道；您可能需要清除或将显示设置为阻止。

编辑：可能已经找到问题所在。

浏览器对剪辑路径的支持在 safari 中是部分的http://caniuse.com/#feat=css-clip-path

你应该给我们前缀 -webkit-clip-path:

Answer 2

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

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

具有位置的元素：相对于 SVG 剪辑路径未在 Safari 中显示

Elements with position: relative with SVG clip paths not displaying in Safari

css

safari

svg

css-position

clip-path