具有位置的元素:相对于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)中,只要从#clipMediv到clipPath(在SVG元素内)的链接完好无损,就不会显示这些相对定位的元素.

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

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

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

的jsfiddle:

同样,这只是Safari.我花了一段时间将它隔离到关于SVG剪切路径,position: relative所以我猜测可能有其他类似结果的情况.

有没有人遇到这个或有任何建议让这些相对定位的s显示？

编辑
这可能是一个Mac的东西.虽然它在OSX中的Chrome和Firefox中显示为预期,但它不会在iOS上的任何浏览器中显示相对定位的DIV.

有任何想法吗？

Answer 1

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

它通过将硬件加速(通常是浏览器更加注重渲染)来强制将其置于GPU上.