Why doesn't CSS clip-path with SVG work in Safari?

Question

I have an inline svg and a background image on the masthead. I am using css clip-path to \'clip\' out the svg animation with the image below.

I have it working gre

Answer 1

You need the -webkit- prefix. I can confirm your circle and inset options work in Safari after adding the -webkit- prefix to your CSS and JS.

CanIUse.com reports partial support for Safari if using the -webkit- prefix: http://caniuse.com/#search=clip-path

CSS:

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
  -webkit-clip-path: url(#cross);
}

JS:

var clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", function (evt) {
  document.getElementById("clipped").style.clipPath = evt.target.value;
  document.getElementById("clipped").style.webkitClipPath = evt.target.value;
});

Forked CodePen: https://codepen.io/techsock/pen/JEyqvM

---

Update

It appears that this may be an issue with Safari's implementation of clip-path. There is a Master Bug reported regard webkit issues with clip-path. In JSFiddle, Safari will occasionally render the SVG clip path containing multiple rect elements correctly, but not reliably (see attached screenshots below). There does not appear to be an extremely reliable workaround. It also is noted on the MDN page you pulled this example from: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#Browser_compatibility. MDN lists Safari as No Support.

JSFiddle behavior screenshots:

✗ Incorrect

✗ Incorrect

✓ Correct