CSS clip-path fails on load in Safari

Question

I've been playing with CSS clip-path property and made this pen animating a logo: http://codepen.io/alexcoady/pen/PqJavW. The code draws a number of divs and applies clip-paths to them dynamically based on some triangles I've generated.

This works as expected in Chrome (43.0.2357.124 (64-bit) ).

In Safari (8.0.4 + iOS), however, nothing shows up at all. Once I've opened the inspector I can uncheck the clip-path property, then I re-check it - the path is visible as expected.

Any ideas what I can do to ensure that Safari renders these paths first time round?

Thanks.

Answer 1

I believe only Chrome supports animated clip-paths.

I've also searched for a solution for this problem but the closest I can make out, is currently only Chrome can animate the points of an SVGElement.

Here are a few places to look for a solution.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property http://www.w3.org/TR/SVG11/shapes.html#PolygonElement