CSS clip-path only works properly on first element in Safari 10

[ryanlabar]

Using CSS clip-path on multiple elements using the same path only displays on first element and renders strange on, or doesn't display, the proceeding elements in Safari 10.0.

See CodePen for example: http://codepen.io/ryan_labar/pen/KgLNyx

[emilbjorklund]

Hi @ryanlabar! I've seen this bug in various forms before, and basically, Safari/WebKit has some general trouble mapping the coordinate system between the SVG and the HTML element the effect is applied to.

Luckily, there’s a fix: applying any property that forces the affected element to render in its own compositor layer seems to make Safari snap back into getting the coordinates right, thus fixing the bug.

In your example, adding e.g. transform: translateZ(0) or will-change: transform to the .clipWrap element seems to do the trick.

[rnagy90]

Still relevant on Android Chrome when used on div which have background images and contains a child svg with same path as the clip-path.

[viking2917]

Still helps in 2022, in Ionic apps using the embedded Safari. Thanks!

[emilbjorklund]

@viking2917 Glad to hear that this repo is still of use! 🙂

[blauweb]

Just came here to express my appreciation for the solution !
I wasn't using SVG, however translateZ also solved my issues, while using the clip property on a parent div :)