iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話

作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。
以下のような感じです。

See the Pen border radius & overflow hidden by monochrome (@monochrome-design) on CodePen.

それなりに上手く出来たと思っていたのですが、スマホで見てみると丸くマスクされていない事が判明。。。
あれ?と思いmacのsafariで見てみると同じくマスクされていませんでした。しかし、chromeやfirefoxで見ても問題ないのでsafari固有の問題かと思ったんですが、スマホで上手く表示されないのは痛い、、

macのsafariで表示した例

丸く切り抜かれて無くて非常に残念。これは何とか出来ないかと思い調べてみると同じ悩みを持っている方がいて、対処法も書いてありました。

親要素にz-indexを指定すると解消される

答えから言うと、親要素(今回の場合、circle)にz-indexを指定すればマスクが正常にかかります。
下記のコードが修正後のものです。z-index加えただけですが、iOSでもmacのsafariでも正常にマスクがかかっている事を確認しました。

See the Pen border radius & overflow hidden fix by monochrome (@monochrome-design) on CodePen.

こういうバグ(?)の対処法思いつく人って凄いなぁっていつも思います。これで安心してマスクを使ったアニメーションが作れそうです。