HOME > > > レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

レスポンシブWebデザインでiPhoneのバージョンios8.4.1でリンクが飛ばない

iPhoneをios8.4.1にバージョンアップしたら、レスポンシブ対応でリンクが飛ばなくなった

iPhoneをios8.4.1にバージョンアップした所、レスポンシブWebデザイン対応サイトのバナーリンクが飛ばなくなってしまいました。え・・・?です。今まで普通に飛んでいたのに。
バージョンアップ前のiPhoneで確認した所、問題なくページ遷移しています。どうやら問題はios8.4.1のバグか、リンク設定を変える必要があるかのどちらかかと思いました。
しかし、バナー群の範囲が違う所では普通にページ遷移している・・・?これはなぜ?
検証した所、遷移するバナーはマウスオーバーアクションが入っていない、遷移しないバナーはマウスオーバーアクション(opacity)が入っている、という感じでした。マウスオーバーアクションを削除するとios8.4.1でもページ遷移する事が出来ました。
他のマウスオーバーアクションだとどうなんでしょうかね。

「opacity:0.1~0.9」では遷移しません

検証はテキストリンクで行ってみました。
単純にCSSでhoverにopacityを入れて、透過検証した所、やっぱりリンクは飛びません。
画像とかは関係なく、テキストリンクでもopacityを設定をしているとリンクが飛ばないという事になります。


a:hover{
 opacity:0.5;
}

「opacity:1」はOK

「opacity:1」だと問題なくページ遷移しました。
でもopacity:1ならそもそも入れる必要がなくなりますが・・・


a:hover{
 opacity:1;
}

「color」はOK

今度はマウスオーバーしたらテキストの色を変更する設定で検証してみた所、問題なくページ遷移しました。
テキストカラーを変えるのは問題なさそうですね。


a:hover{
 color: #ff0000;
}

「link」はOK

未訪問に適用される「:link」は問題なくページ遷移しました。


a:link{
 color: #ff0000;
}

「visited」はOK

リンク先にすでに遷移されている場合に適用される「:visited」は問題なくページ遷移しました。


a:visited{
 color: #ff0000;
}

「active」はOK

要素がアクティブの場合に適用される「:active」は問題なくページ遷移しました。


a:active{
 color: #ff0000;
}

「background-color」はOK

マウスオーバー時のbackground-colorを設定した場合でも、問題なくページ遷移しました。


a:hover{
 background-color: #ff0000;
}

「background-image」はOK

マウスオーバー時のbackground-imageを設定した場合でも、問題なくページ遷移しました。


a:hover{
 background-image: url(../画像イメージパス);
}

レスポンシブWebデザインの場合どうするか

レスポンシブWebデザインを適用してる時は、PC用とスマートフォン用に透過する全ての対象リンクを別々に作らなければいけないのか、と思ってしまいましたが、jQueryで対応する事が出来ました。
以下の様にjQueryを使ってopacityを設定すれば問題なくページ遷移されました。


<script>
$(function () {
 $('a').hover(
  function () {
   $(this).animate({opacity:0.5},1);
  },
  function () {
   $(this).animate({opacity:1},1);
  }
 )
});
</script>

※使う際はjQueryを設置するのもお忘れなく
※(‘a’)を(‘a img’)とすれば画像だけ透過になります

ios8.4.1でリンクが飛ばないのってバグなのか?

hoverでopacity(透過)設定しているとリンクが飛ばないのってバグなんでしょうかね。
もしかしてスマートフォンではタップが基本なので、オーバーアクションは要らないって事なんでしょうか。
バグじゃないとしたら今後opacityの使い方は気をつけなければいけないので、今のうちから対応しておきます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket