具有position: relative的元素在SVG剪切路径中在Safari浏览器中无法显示

Question

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

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

应用剪辑路径的HTML元素：

定义剪辑路径的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到SVG元素内的裁剪路径（clipPath）的链接保持完整，这些相对定位的元素就不会被显示出来。

最新版本的Firefox和Chrome都能正常显示。

将position:属性更改为除相对定位以外的任何值，就可以正常显示所有内容。

禁用裁剪路径（通过完全删除SVG元素或从CSS中删除clip-path:属性）也可以正常显示所有内容。 JSfiddle: 再次强调，这只是Safari的问题。我花了一段时间才将其隔离到与SVG裁剪路径和position: relative有关，因此我猜可能还有其他类似结果的情况。

有人遇到过这种情况或者有什么建议可以让这些相对定位的元素显示出来吗？

编辑： 可能这是Mac的问题。虽然在OSX的Chrome和Firefox中显示正常，但在iOS上的任何浏览器中都无法显示相对定位的DIV。

有什么想法吗？

- Daveh0

---

我不同意标题的更改。它暗示了应用剪辑路径的元素未显示。事实并非如此；被剪辑的元素正常显示。实际上页面上的另一个带有position:relative属性的元素未显示。这只是我的个人见解。 - Daveh0

Answer 1

尝试在被裁剪的元素上使用transform: translateZ(1px)。如果在移动设备上没有显示，可能还需要包含其他前缀。演示 这样可以通过将元素放在GPU上来强制硬件加速（实际上是让浏览器更加关注渲染它）。

---

编辑：现在你可能可以使用will-change: transform来做同样的事情。但有些事情可能仍然需要translateZ的技巧。

- Zach Saucier

---

哇！我正期待这样的解决方案。谢谢！它确实解决了我的问题。我会回报给你，看它在我的实际应用中是否有效。有没有汇总这样好的技巧的资源？ - Daveh0

@Daveh0 StackOverflow 是其中之一 :P - Zach Saucier

@Daveh0 我不相信目前有其他的方法。将来我们可能会有will-change属性，它大致做同样的事情，但目前还没有实现。 - Zach Saucier

还有其他方法可以操纵元素的层叠顺序吗？ - Daveh0

@Daveh0 我不知道当前的伪元素设置是否支持此功能。您可以尝试将伪元素附加到父元素上，即使只是为了达到这个效果，您也可以添加一个父元素。http://jsfiddle.net/64awcv0p/8/ - Zach Saucier

Answer 2

你也可以写成：

transform: translateZ(0);

它可以工作，但仍然是Safari的一个bug。

- diesel94

Answer 3

两件事：

1. 使用CSS设置display:block;到任何一个position:relative的元素;
2. 尝试对任何一个position:relative的元素使用clear:both;

我目前没有你正在使用的Safari版本进行测试，但是我知道在使用position:relative时，您可能需要清除或设置显示为block。

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

Safari中clip-path的浏览器支持是部分的http://caniuse.com/#feat=css-clip-path

您应该使用前缀-webkit-clip-path:

- Charlie

---

正如我在问题中所述，未显示的是具有position:relative属性的元素。应用了SVG剪辑路径的元素显示正常。 - Daveh0

在您提供的示例中，div style="position:relative;"末尾没有分号。 - Charlie

另外，您没有将任何position:relative的div嵌套在另一个position:relative的div中，对吗？ - Charlie

但你可以在我发布链接的jsfiddle中查看代码，这不会有任何影响。 - Daveh0

我查看了你的jsfiddle代码。你使用position:relative引用元素，好像有多个一样。但在jsfiddle中，你只有一个带有position:relative的样式。这就是为什么我问是否有其他嵌套的原因。当它们被嵌套时，编码方式确实会有所不同。此外，你在clip-path之后使用了-webkit-clip-path。-webkit-clip-path需要先列出。 - Charlie