Safariでボタンホバーした際に下に動く、線が見切れる問題の解消【border-radius】

上記のような感じのボタンです。

Safariでだけ、ボタンをホバーした際にボタンが少し下に動いてしまいました。CSSではopacityの設定しかしていないため、下に動くのは意図しない動作です。

また、上記のようなborderを設定しているボタンは上のborderが一瞬見切れるという現象も併せて発生するという…。

現象の再現ができなかったのですが、調べてみるとどうやらborder-radiusを使っているボタンで発生するバグみたいです。なお、既存のCSSを反映した上での作成だったので、他の要素が悪さしていた可能性がありますが…。

【解消方法】box-shadowを追加で設定する

そんなボタンの挙動を解消したのが、box-shadowを設定する方法でした。CSSは下記のようなイメージです。

.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 50px;
  background: #FFF;
  color: #000;
  border: 1px solid #000;
  border-radius: 50px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); // safariのバグ対策
}

box-shadowは「レイヤー分離の影響を受けにくい」「Safariでのレンダリングがより安定している」「パフォーマンスへの影響が少ない」という利点があるとのことです。

rgba(0, 0, 0, 0)にすることで、視覚的な影響もなく問題解消できました。

ちなみに、

・will-change: transform;

・transform: translate3d(0, 0, 0);

・backface-visibility:hidden;

なども試してみましたが、効果がなかったり、上のborderが初期表示で見切れてしまい新たな問題が生まれたりといった不具合があったため断念しました。

調べた感じだとbox-shadowを使った修正方法はなかったので、備忘録としてこの記事に残しておきます。同じような現象になった方はぜひ参考にしてみてください。