iOSでaリンクを2回タップしないとジャンプしない原因と一発対処

2017.4.6 CSS

iOS8.xでリンクをタップしても1回ではジャンプせず、2回タップすることでようやくジャンプするバグについて。

ネットで検索するとすぐこの事象についての解決策が出てきますが、今回はそれ以外にも発生するケースがあったのでメモとして。

 

1.要素に:hoverの設定がある

マウスオーバーすると透過するエフェクトをつけていませんか?

hover設定があることで、一回目のタップはマウスオーバー、2回めのタップはクリックと解釈されるようです。。

対策:メディアクエリで管理しよう

min-widthとかで限定しましょう。

とはいえ、color:〜の設定のみだとこのバグが出なかった気がします。opacityやその他のプロパティでもバグが生じる・生じないがあるようです。

2.疑似要素も忘れずに

よくある、マウスオーバーするとボーダーがピュンっとのびる効果。僕は:afterや:before疑似要素で実装しますが、aに対してでなく、aにマウスオーバーしたときのの疑似要素に設定がある場合にもバグります。

 

対策:メディアクエリで管理しよう&ピュンっと伸びる棒はdisplay:none

そもそもスマートフォンなので、リンクにホバーという考えは無くて良い(視線で云々・・という未来の話はさておき)ので、本来ならピュンっと伸びる棒もここではdisplay:none;に。

もちろん、前項のopacity設定がある場合はそちらも対処しておきます。

iOSでリンクを2回タップしなきゃ問題、もっとお手軽な対策

pointer-eventプロパティを指定しましょう。

これはマウスカーソル関連のイベントを無効化できるものです。もちろん、タップも無効化されます。

リンクをcoming soonにするときにも使えますよ。

 

最後に

CSS基礎の落とし穴でした。

2項目でハマってしまったので、誰かのお役に立てれば幸いです。

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。