iOSでaリンクを2回タップしないとジャンプしない原因と一発対処

2017.4.6 CSS

iOS8.xでリンクをタップしても1回ではジャンプせず、2回タップすることでようやくジャンプするバグについて。

ネットで検索するとすぐこの事象についての解決策が出てきますが、今回はそれ以外にも発生するケースがあったのでメモとして。

 

1.要素に:hoverの設定がある

マウスオーバーすると透過するエフェクトをつけていませんか?

a:hover,
a:active,
a:focus{
 opacity: 0.5;
}

hover設定があることで、一回目のタップはマウスオーバー、2回めのタップはクリックと解釈されるようです。。

対策:メディアクエリで管理しよう

@media screen and ( min-width: 640px ){
	a:hover,
	a:active,
	a:focus{
	 opacity: 0.5;
	}	
}

min-widthとかで限定しましょう。

とはいえ、color:〜の設定のみだとこのバグが出なかった気がします。opacityやその他のプロパティでもバグが生じる・生じないがあるようです。

2.疑似要素も忘れずに

よくある、マウスオーバーするとボーダーがピュンっとのびる効果。僕は:afterや:before疑似要素で実装しますが、aに対してでなく、aにマウスオーバーしたときのの疑似要素に設定がある場合にもバグります。

.button a:after{
	content:  " ";
	width: 0;
	height: 1px;
	margin: auto;
	display: block;
	background-color: #333;
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;
	transition: all 0.3s;
	
}	

.button a:hover:after,
.button a:active:after,
.button a:focus:after{
	width: 100%;
}

 

対策:メディアクエリで管理しよう&ピュンっと伸びる棒はdisplay:none

そもそもスマートフォンなので、リンクにホバーという考えは無くて良い(視線で云々・・という未来の話はさておき)ので、本来ならピュンっと伸びる棒もここではdisplay:none;に。

もちろん、前項のopacity設定がある場合はそちらも対処しておきます。

@media screen and ( max-width: 640px ){
	a:hover:after,
	a:active:after,
	a:focus:after{
		display: none;
	}	
}

iOSでリンクを2回タップしなきゃ問題、もっとお手軽な対策

pointer-eventプロパティを指定しましょう。

これはマウスカーソル関連のイベントを無効化できるものです。もちろん、タップも無効化されます。

リンクをcoming soonにするときにも使えますよ。

a.comingsoon{
	pointer-events: none;
}	

@media screen and ( max-width: 640px ){
	.button a{
		pointer-events: none;
	}	
}

 

最後に

CSS基礎の落とし穴でした。

2項目でハマってしまったので、誰かのお役に立てれば幸いです。

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。