Relatively positioned elements not being displayed in Safari

Sometimes the work process with cross browsing compatibility could be stick on a curious browsers features. And we spending much time trying to resolve an easy issue (at the first look).
So I want to describe one of the Safari browser feature that we found on client’s website (we’ve picked up it on a half way).

As an example – I will describe a web page in which I am using an SVG clipping path applied to one of the page’s HTML elements.

SVG element:

<svg height="0" width="0">
  <defs>
    <clipPath id="fig">
      <path d="M50 0 L0 200 L125 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(#fig);
    -webkit-clip-path: url(#fig);
    width: 200px;
    height: 200px;
    background-color: blue;
}

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

<div id="clipMe"></div>
<div class="container">MY PARENT IS RELATIVE</div>

In Safari 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.
The latest versions of Firefox, Chrome, IE/Edge 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.

See the working sample here: 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.

How to solve it?

Chromium (Safari/Chrome) and its webkit often seem to have weird disappearing bugs. So the fix of that issue – is to trigger the 3d algorithm which in our case would be on the position:relative element.

<div style="position:relative; -webkit-transform:translateZ(0);">MY PARENT IS RELATIVE</div>

So now Safari will show the text.
And if we will add position:absolute to the SVG then Safari puts our relatively positioned text clipped inside the SVG. It seems a very buggy implementation!

As an aside very old versions of Safari would hide all position:relative elements when position:relative was applied to the html element.

Back to Articles List

Let’s Work Together

TELL US MORE ABOUT YOUR PROJECT

Every day, we strive to assist a websites of our clients in augmenting their brand’s online visibility, improving the work any parts of web resources, increasing reach & engagement with a target audience and eventually drive sales.

LET’S CONNECT