WebサイトをiPhoneで表示させてリンク設定している画像をタップすると1回目では画面遷移せず、2回タップするとようやく画面遷移するという現象が起きています。
原因の推測と対策を紹介します。
CSSでaタグに:hoverで何かの変化を施してある場合、２回クリックしないとリンク先にページ遷移しないです。
- １回タップ（a:hover描画処理のみで止まる）
- ２回タップ（リンク先に飛ぶ）
テキストリンク系は大丈夫ですが、「画像の透かし」や「お申込はこちら」的なボタン装飾も該当しています。
:hover事件の該当例
- ・a:hover imgで、opacity: 0.7とかの透かし
- ・position: relativeでtop: 3px;とかでボタン凹む
- ・marginの変化を付ける（凹むなど）
- ・box-shadowでボタンに変化
- ・<input type=”image”>ボタンに施した変化
特にimgのopacity: 0.7（70％透かし）は多くのサイトで採用されています。ECサイト等の場合、商品画像が全部マウスオーバーで透ける（背景が白だと明るくなる）施しがされていたりしますし、購入ボタン的な一番クリックして欲しいようなaタグボタン装飾やinputボタンが該当します。
:hoverでも大丈夫な要素
- color
- text-decoration
- background-color
- background-image
テキスト系や単純に色が変わる要素なら大丈夫そうで、１タップで遷移します。CSSスプライト的なbackground-imageだけなら大丈夫ですが、そこに前述のpositionとか絡めた変化があるとダメっぽいです。
対処法
- ・:hoverを:activeに変更する
- ・opacity: 1にする
- ・jQueryを使う
一時しのぎですが、マウスオーバー要素が無くなれば解消されます。a:activeなら問題なく１クリック遷移します。
img透かしのopacityは1（100％）にすれば、遷移します。（予備策というか100%ならそもそも不要なので、こちらは対処法とは言えませんが。）
jQueryでの対処方法。
$(function(){
$("a img").hover(function(){
$(this).animate({opacity:0.7},200)
},
function(){
$(this).animate({opacity:1},200)})
});
ECサイトを運営されている方等は作成されたサイトを確認して対応を急いだほうがいいかもしれませんよ。