iOS 8.4.1の:hover問題

追記(2015年10月23日)
iOS 9.0.2で確認した所この問題は解決していました。

ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君

上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。

どんな現象になるの？

以下のサンプルで確認できます。

a:hover img{
	opacity:0.6;
}
<a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a>

サンプルページ

iOS 8.4.1をお持ちでない方は以下の動画で確認できます。

SPサイトなら:hoverを利用するケースは少ないので使わない方向で進めれば問題ないのですがレスポンシブサイトなどタッチデバイスとマウスデバイス両方を考慮しなくてはいけない時に問題が起こりそうです。

発生するケース

ケース1

opacity以外にも以下のようなpostionを変更しても発生します。

a:hover{
	position: relative;
}
a:hover img{
	position: absolute;
	top:1px;
	left:1px;
}

他のCSSプロパティでも結構発生するので:hoverを利用する際にはopacity以外でも注意が必要です。

ケース2

以下のように親要素に:hoverを指定した際も発生します。

div:hover{
	opacity:0.6;
	display: inline-block;
}
<div><a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a></div>

ケース3

以下のように子要素に:hoverを指定した際も発生します。

img:hover{
	opacity:0.6;
}
<a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a>

ケース4

以下のように子要素をテキストにしたら発生しなくなります。

a:hover{
	opacity:0.6;
}
<a href="http://blog.webcreativepark.net/">button</a>

ケース5

上記のケースにdisplay:inline-block;を指定すると発生します。

a:hover{
	opacity:0.6;
	display:inline-block;
}
<a href="http://blog.webcreativepark.net/">button</a>

ケース6

img要素の場合もdisplay:inlineを指定すると発生しなくなります。

a:hover img{
	opacity:0.6;
	display:inline;
}
<a href="http://blog.webcreativepark.net/"><img src="button.png" alt="button"></a>

これは解決策としてはかなりよいのですがページ遷移後戻ってくるとopacityがかかった状態です。

サンプルページ

ケース7

:hoverと:activeの合わせ技。こちらも解決しますがページ遷移後戻ってくるとopacityがかかった状態です。(加えてPCで見た際にクリックした一瞬透過が外れるのが気になります。)

a:hover{
	opacity:0.6;
}
a:active{
	opacity:1;
}

解決方法

マウスデバイスで:hoverを保ちながらiOSデバイスで閲覧した際に1タップでページ遷移し、戻るで戻ったきた場合も状態が正しい状態にするために苦肉の策でJavaScriptで対応します。以下のようなJavaScriptを記述するとiOSデバイスの場合のみbodyにclass属性「ios」が付与されるのでそれを元に:hover時のスタイルを打ち消します。

document.addEventListener("DOMContentLoaded", function(event) {
	if(navigator.userAgent.match(/iPhone|iPad|iPod/)){
		document.getElementsByTagName("body")[0].classList.add("ios");
	}
});
a:hover{
	opacity:0.6;
}
.ios a:hover{
	opacity:1;
}

サンプルページ

もっと良い方法があるとよいのですが、ひとまずは上記の対策でしのぎました。

スポンサードリンク

«jQueryのtrigger()で名前空間を使う | メイン | canvasで三角形の外接円を描く»