技術と雑記ブログ

【バグ】Safariでborder-radiusがhoverアニメーション中に効かない場合の対応

以前案件で「iPhoneで丸くトリミングしてる画像が一瞬四角の画像になるんだけど？」と言われて調べたところiPnoneではなくSafariでborder-radiusが効かない場合があることがわかりました。 この記事ではその対処法を紹介します。

目次

Safariでborder-radiusがhoverアニメーション中に効かない場合の対応

border-radiusを指定している要素にz-indexを指定。

終わり！

ホントにこれだけで解決なのですが効かない状況を説明します。

Safariのバージョン

バージョン11.1.2

デモ

以下の丸い画像をhoverしたら拡大するアニメーションするデモを例に説明します。
※当然ですがSafariで見ないと効果がわからないです

HTML

<div class="c-coin">
  <img src="coin.jpg" alt="画像" class="c-coin__image">
</div>

CSS（SCSS）

hoverすると画像が0.3秒で1.14倍になるCSS

.c-coin {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.c-coin__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
  .c-coin:hover & {
    transform: scale(1.14);
  }
}

効かない状況

hoverアニメーションのtransitionで指定している.3sつまり0.3秒間だけ効かないようです。

問題を解決したCSS

最初の述べたように
border-radiusを指定している要素にz-indexを指定。

.c-coin {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;//border-radius指定している要素にz-indexを追加
}

.c-coin__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
  .c-coin:hover & {
    transform: scale(1.14);
  }
}

参考にさせていただいた記事

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