技術と雑記ブログ

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

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

目次

  1. Safariでborder-radiusがhoverアニメーション中に効かない場合の対応
    1. Safariのバージョン
    2. デモ
    3. HTML
    4. CSS（SCSS）
    5. 効かない状況
    6. 問題を解決したCSS
  2. 参考にさせていただいた記事

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

終わり！

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

バージョン11.1.2

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

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

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

scss
.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秒間だけ効かないようです。

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

scss
.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の指定が効かない