Relatively positioned elements not being displayed in Safari

HTML & CSS
1

Greetings. Not sure if this belongs in the HTML forum or in here. Mods, please feel free to move at your desecration. Anyway…

I have 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="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
https://jsfiddle.net/daveh0/6jn6px4k/

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 <div>s to display?

2

Hi,

Chrome and webkit often seem to have weird disappearing bugs. The usal fix is to trigger the 3d algorithm which in your case would be on the position:relative element.

e.g.

  <div style="position: relative;-webkit-transform:translateZ(0)">
        <strong>My parent is relative</strong>
    </div>

Safari will now show the text.

If you add position:absolute to the svg then safari puts your relatively positioned text clipped inside the svg. It seems a very buggy implementation!!

As an aside veryold versions of Safari would hide all position:relative elements when position:relative was applied to the html element (although I can find no good reason why anyone would do that).

1 Like
3

Awesome! That did the trick. Thanks much.

4

Is there any other way to force hardware acceleration? This solution fixes the issue with the element not being displayed at all and in turn causes a new one:

In my “real” implementation, have a pseudo-element (created via ::before) that needs to be overlapped by the relatively positioned element. To achieve this, I assign z-index: -1 to the pseudo-element. It works great until I add the -webkit-transform:translateZ(0) at which point the pseudo-element z-index seems to reset causing it to stack on top of the main element.

See it in action: http://jsfiddle.net/daveh0/64awcv0p/6/

5

Looks like i’m going to have to wrap each element in another relatively positioned DIV. Didn’t want to have to change/add extra markup but there does’t seem to be any way manipulate that stacking order once hardware acceleration kicks in.

6

Yes, unfortunately I think you are stuck with that approach as transformed elements become ‘atomic’ and you cannot get underneath them from within the same context.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.