iPhoneで1回目のタップがhover状態の表示に使われ、2回目で移動することがあります。ただし、透明な重なり要素やJavaScriptのpreventDefaultでも似た症状が出ます。空のtouchstartイベントを全ページへ加える方法を万能な対策として使うのは避け、原因を分けて修正します。
hoverによる表示変更を確認する
問題のリンクに適用される:hoverで、子要素や疑似要素のdisplay・visibilityが変わっていないか調べます。コピー環境でそのルールを外して1回で移動するか確認してください。端末幅だけでタッチ端末と判断せず、マウスでのhover装飾を次のメディア条件へ限定します。
.waza-tap-link { display: inline-block; padding: .8em 1em; text-decoration: underline; }
.waza-tap-link:focus-visible { outline: 3px solid #315d50; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
.waza-tap-link:hover { background: #edf3ef; }
}既存の該当:hoverルールを置き換えます。上から追加するだけでは元のルールは無効になりません。クラス名は対象リンクにだけ付け、子テーマのCSSまたは追加CSSへ記載します。
操作できる見本
同じページの確認位置へ移動移動先です。リンクは通常のa要素で、クリックをJavaScriptで取り消していません。
CSSで直らない場合
重なった要素がタップを受け取っていないか、クリックハンドラーが移動を取り消していないか確認します。メニューの開閉とリンク遷移を1つの要素に兼用させている場合は、開閉ボタンと移動リンクを分けます。プラグイン本体を直接書き換えると更新時に失われるため、提供元の修正や設定を確認してください。
iOS Safariの実機で1回タップ、PCでクリック、キーボードでTabとEnterを確認します。この見本のデスクトップブラウザ確認はiOS実機の再現検証の代わりにはなりません。戻す場合は追加クラスとCSSを外し、元のルールをバックアップから戻します。
hoverメディア特性の仕様を参照してください。
よくある質問：iOSでリンクを2回タップしないと反応しないとき
iPhoneでリンクを2回タップしないと移動しないのは、なぜですか？
記事では、1回目のタップがhover状態の表示に使われ、2回目で移動することがあるとされています。ただし、透明な重なり要素やJavaScriptのpreventDefaultでも似た症状が出るため、原因を分けて修正します。
空のtouchstartイベントを全ページに加えれば直りますか？
記事では、空のtouchstartイベントを全ページへ加える方法を万能な対策として使うのは避け、原因を分けて修正するとされています。
まず何を確認すればよいですか？
問題のリンクに適用される:hoverで、子要素や疑似要素のdisplay・visibilityが変わっていないか調べます。コピー環境でそのルールを外して、1回で移動するか確認してください。
hoverの装飾は、どう直しますか？
端末幅だけでタッチ端末と判断せず、マウスでのhover装飾を記事のメディア条件へ限定します。既存の該当:hoverルールを置き換え、上から追加するだけでは元のルールは無効になりません。クラス名は対象リンクにだけ付け、子テーマのCSSまたは追加CSSへ記載します。
CSSで直らない場合は、どうしますか？
重なった要素がタップを受け取っていないか、クリックハンドラーが移動を取り消していないか確認します。メニューの開閉とリンク遷移を1つの要素に兼用させている場合は、開閉ボタンと移動リンクを分けます。プラグイン本体を直接書き換えると更新時に失われるため、提供元の修正や設定を確認してください。
修正後は、何を確認しますか？
iOS Safariの実機で1回タップ、PCでクリック、キーボードでTabとEnterを確認します。記事の操作見本のデスクトップブラウザ確認は、iOS実機の再現検証の代わりにはなりません。
元に戻すには、どうしますか？
追加したクラスとCSSを外し、元のルールをバックアップから戻します。hoverメディア特性の最新の仕様は、記事が案内する仕様ページで確認してください。
