だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

iPadでaタグのアンカーがクリック動作しない時の対処法。:hoverなど疑似要素をチェック

アンカーを仕込んだaタグにafter、before、hoverなどの疑似要素を使ってcss3アニメーションを実装している場合は、iPhoneやiPadでタップした時、先にアニメーションが実施されて、二回目のタップでアンカー動作、という振る舞いになる時があります。対処法は以下の通りです。

対処法

こういう時は、面倒ですが、以下の対応が必要となります。

・メディアクエリ(css)でスマホとタブレットの問題となる疑似要素を外す

・ユーザーエージェント処理(jsやphp)でスマホとタブレットの問題となる疑似要素を外す

とくに、パソコンの画面をそのままタブレットに反映している時に発生しやすい現象です。

cssではどうにも難しい場面も多いので、jsやphpで、特定のユーザーエージェントにおいては、疑似要素をなくすような処理をしたコードを持っておくと便利です。

ページ上部に戻る