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

Question

I have a web page in which I am using an SVG clip path applied to one of the page's HTML elements.

SVG element:

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

HTML element the clipping path is applied to

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

CSS defining the clip

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

On the same page, I have various elements, some of which are relatively positioned:

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

In Safari (8.0.4) only, these relatively positioned elements are not being displayed as long as the linkage from the #clipMe div to the clipPath (within the SVG element) is intact.

Latest versions of FF and Chrome display as expected.

Changing the position: property to anything other than relative displays everything as expected.

Disabling the clipping path (either by removing the SVG element all together or removing the clip-path: property from the CSS) displays everything as expected as well.

JSfiddle:

Again, this is Safari only. It took me a while to isolate it down to being about the SVG clipping path and position: relative so I'm guessing there may other situations with similar results.

Has anyone run into this or have any suggestions for getting those relatively positioned s to display?

EDIT
It may be that this a Mac thing. Although it displays as expected in Chrome and Firefox in OSX, it does not display the relatively positioned DIVs in any browser on iOS.

Any ideas?

Answer 1

Try using -webkit-transform:translateZ(1px) on the clipped element. If it's not showing on mobile, you may need to include the other prefixes as well. Demo

It forces hardware acceleration (essentially the browser pays more attention to rendering it) by putting it on the GPU.