iOS8.xでリンクをタップしても1回ではジャンプせず、2回タップすることでようやくジャンプするバグについて。
ネットで検索するとすぐこの事象についての解決策が出てきますが、今回はそれ以外にも発生するケースがあったのでメモとして。
1.要素に:hoverの設定がある
マウスオーバーすると透過するエフェクトをつけていませんか？
1 2 3 4 5 | a:hover, a:active, a:focus{ opacity: 0.5; } |
hover設定があることで、一回目のタップはマウスオーバー、２回めのタップはクリックと解釈されるようです。。
対策：メディアクエリで管理しよう
1 2 3 4 5 6 7 | @media screen and ( min–width: 640px ){ a:hover, a:active, a:focus{ opacity: 0.5; } } |
min-widthとかで限定しましょう。
とはいえ、color:〜の設定のみだとこのバグが出なかった気がします。opacityやその他のプロパティでもバグが生じる・生じないがあるようです。
2.疑似要素も忘れずに
よくある、マウスオーバーするとボーダーがピュンっとのびる効果。僕は:afterや:before疑似要素で実装しますが、aに対してでなく、aにマウスオーバーしたときのの疑似要素に設定がある場合にもバグります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .button a:after{ content: ” “; width: 0; height: 1px; margin: auto; display: block; background–color: #333; position: absolute; right: 0; bottom: –5px; left: 0; transition: all 0.3s; } .button a:hover:after, .button a:active:after, .button a:focus:after{ width: 100%; } |
対策：メディアクエリで管理しよう＆ピュンっと伸びる棒はdisplay:none
そもそもスマートフォンなので、リンクにホバーという考えは無くて良い（視線で云々・・という未来の話はさておき）ので、本来ならピュンっと伸びる棒もここではdisplay:none;に。
もちろん、前項のopacity設定がある場合はそちらも対処しておきます。
1 2 3 4 5 6 7 | @media screen and ( max–width: 640px ){ a:hover:after, a:active:after, a:focus:after{ display: none; } } |
iOSでリンクを2回タップしなきゃ問題、もっとお手軽な対策
pointer-eventプロパティを指定しましょう。
これはマウスカーソル関連のイベントを無効化できるものです。もちろん、タップも無効化されます。
リンクをcoming soonにするときにも使えますよ。
1 2 3 4 5 6 7 8 9 | a.comingsoon{ pointer–events: none; } @media screen and ( max–width: 640px ){ .button a{ pointer–events: none; } } |
最後に
CSS基礎の落とし穴でした。
2項目でハマってしまったので、誰かのお役に立てれば幸いです。
でわ！
