Geek Answers Handbook

Items with position: relative path to SVG clips not showing up in Safari

I have a webpage in which I use the SVG clip path applied to one of the HTML elements of the page.

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 clipping path applied to

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

CSS defining a 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 located relatively:

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

Only in Safari (8.0.4), these relatively positioned elements are not displayed until the connection with the #clipMe div with the clip (inside the SVG element) is broken.

Recent versions of FF and Chrome appear as expected.

Changing the position: property to everything but relative displays everything as expected.

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

JSfiddle:

Again, this is just Safari. It took me a while to isolate it to the point that you trimmed the SVG and position: relative , so I assume there may be other situations with similar results.

Has anyone come across this or have any suggestions for displaying these relatively positional elements?

EDIT
Perhaps this is a Mac business. Although it displays as expected in Chrome and Firefox on OSX, it does not display relatively positioned DIVs in any browser on iOS.

Any ideas?

+5
source share
2 answers

Try using -webkit-transform:translateZ(1px) on the item to crop. If it does not appear on your mobile phone, you may need to enable other prefixes. Demo

This forces hardware acceleration (in essence, the browser pays more attention to rendering it) by placing it on the GPU.

+5
source

two things:

  • Using css set display: block; for any thing that is a position: relative;
  • try to clear: both; on all that is position: relative;

I do not have the version of safari that you are using for testing at the moment, but I know from previous experience when working with the position: relative; you may need to clear or set the display to lock.

EDIT: a problem may have been detected.

Browser support for clip-path partially in safari http://caniuse.com/#feat=css-clip-path

You should use the -webkit-clip-path prefix:

0
source

More articles:


All Articles