ラック
Home > ブログ > 記事 > 2018年5月 > mobileSafariでホバーエフェクトのかかったリンクをタップすると、遷移に2回必要なバグ

mobileSafariでホバーエフェクトのかかったリンクをタップすると、遷移に2回必要なバグ

カテゴリ: ホームページ,スマホ,ブラウザ

ホバーでボタンの色が左から右に満ちて行き反転する様子

ゴーストボタンで、ホバーした際に図のように左から右に色が満ちていって、最終的には背景色が付いて文字色は反転する、といったホバーエフェクトを実装しました。

しかし、このゴーストボタンのリンクをiPhoneやiPadでタップすると動きがおかしい。

このボタンのエフェクトを実装しただけの簡単なページを作成して検証してみると、どうやら1回目のタップでホバーエフェクトが発生し、2回目のタップで遷移しているようなのです。

PCは普通にホバーと遷移なので発生せず、スマホでもAndroidは発生しません。「もしかして、iOS限定のバグなのか?」と思って調べてみると……

たくさん事例が出てきました。iOSのバグのようです。ホバーエフェクトならば全てがこうなるわけではなく、一部のcss指定に限られるようですが、今回はピンポイントで直撃したため、困ったことになりました。

background-attachment: fixed; background-size: cover;の背景画像がおかしな表示になることは以前に判明していましたが、他にもこんなバグがあるとは……iOSもなかなか油断できないです。

今回は止む無く、途中でエフェクトを変更するということで回避しました。

タグ: css,トラブル対処,バグ,Sass(Scss),Safari

 



関連する記事一覧