スマートフォン用ページでアンカーリンクの疑似要素を動かしてたらリンクがダブルタップになった話

このブログのテーマを更新しているときに偶然なりました。困っている人もあまりいないと思うのですが、備忘録として残しときます。

発生した状況

当ブログのアンカーリンクはPCの場合だと、アンダーバーがうにょーーーんと左から右へ出るような感じになっています。
スマホの時にも同様の動作をするようになっていました。:hoverしてもあまり意味ないのですが。

a {
    position: relative;
    display: inline;
    text-decoration: none;
    transition: .2s $easeOutQuart;
    color: #3399ff;
    &:before {
        content: " ";
        display: block;
        position: absolute;
        bottom: 4px;
        width: 0;
        height: 1px;
        background-color: #ff9933;
        transition: .2s $easeOutQuart;
    }
    &:hover {
        color: #ff9933;
        &:before {
            width: 100%;
        }
    }
}

目次のリンクも同様にしているのですが、iOS版Safariで確認したところ、一度タップしただけだと:hoverの状態になるだけで、もう一度タップすることでリンク先に飛ぶ、という謎仕様になっていました。

別のブラウザではどうかと確認したところ、Chrome(iOS)でも同様のバグ?が発生していました。
Firefoxはきちんと動作していました。

対策

どうやら、:before要素をホバー時にびよーーーんと横に伸ばしていたのがだめだったようで、スマホではこれをしないように変更したところ、無事一度のタップでリンク先に飛ぶようになりました。

まとめ

スマートフォンページでは疑似要素だけでなく、:hoverでの動作は基本的に全部解除するのが無難でしょう。
タップ入力とマウスの入力の違いによる切り替えって結構大変ですね…。

  • BLOG
  • >
  • web
  • >
  • スマートフォン用ページでアンカーリンクの疑似要素を動かしてたらリンクがダブルタップになった話