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);
}

対応後のデモページ

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

2件のコメント

  1. mankind より:

    同じ不具合で悩んでいたため、大変助かりました。
    ありがとうございました!

    • cly7796.net より:

      mankindさん
      コメントありがとうございます。
      お役に立てたようでよかったです!

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31