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 height="0" width="0">
<path d="M50 0 L0 200 L125 200 Z" />
HTML element the clipping path is applied to
CSS defining the clip
On the same page, I have various elements, some of which are relatively positioned:
<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.
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.