Safariでborder-radiusの指定が効かない

border-radiusとoverflow: hidden;を指定した際、Safariでborder-radiusが効かないことがあったので、対応方法をメモ。

サンプルコード

border-radiusとoverflow: hidden;で円形にマスクをかけて、オンマウス時に子要素のimgを拡大させるようにします。

HTML

<div class="circle">
	<img src="img.jpg" width="200" height="200">
</div>

CSS

.circle {
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 100px;
}
.circle img {
	transition: 500ms;
}
.circle:hover img {
	transform: scale(1.1);
}

これで問題ないかと思ったのですが、Safariだとオンマウスしてimgがアニメーションしている間、マスクが解除されてしまっていました。
Safariでうまくいかなかった場合のデモページ
　

対応方法としては、マスクを設定している要素にz-indexを指定するといいようです。

CSS

.circle {
	position: relative;
	z-index: 1;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 100px;
}
.circle img {
	transition: 500ms;
}
.circle:hover img {
	transform: scale(1.1);
}

対応後のデモページ

【参考サイト】

• iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 | MONOCHROME DESIGN : 東京都中野区東中野でWordPressによるホームページ・サイト制作を行うフリーランスデザイナー