iphoneでリンクが2回タップしないと動かない時の意外な原因とその対策

スマホサイトで、リンクをタップしても何度かタップしないとジャンプしないという現象が発生しました。

そのリンクは、お問い合わせボタンでとび先がアンカーになっていました。

PCの検証ツールでは特に問題が起きませんが、スマホの実機のみ問題が起きます。

過去の事例から以下の内容かと思いましたが、解決しませんでした。

また、検索すると出てくるよく知られた、スマホでhoverが付いたリンクのタップが反応しないという既知の問題も該当していませんでした。

この記事で分かること

問題の記述

問題となったのは以下の記述です。

ぱっと見特に問題ないように見えますが、実は、buttonタグにリンクを張るときはaタグと組み合わせる方法は使わないのが普通です。

この書き方が原因でした。

<button>
  <a href="#contact"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</a>
</button>

<button onclick="location.href='#contact'"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</button>

buttonタグをdivタグに置き換えるだけで問題なくなります。

<div class="button">
  <a href="#contact"><img src="img/header-mail.png" alt="お問い合わせ">お問い合わせ</a>
</div>