LoginSignup
25
26

More than 5 years have passed since last update.

iOS8.4.1以降でhoverにopacityを設定するとリンクがダブルタップしないと動いてくれない問題にでくわした話

Posted at

こんにちは! 最近フロントよりもやってる@srockstyleです!

iOSの8.4.1になってa:hoverがなんかイラッとする挙動するようになったなあ?という方いませんか? 僕です!

iOS8.4.1でダブルタップしないとリンクを飛んでくれない問題

ChromeでもSafariでも出現しました!

こんな感じのタグにすると発生するようです。

<a href="/link.html">
a {
    &:hover {
        opacity: 0.8 ;
    }
}

対策

iOSに限るので、Media Queryで対応できます。
hover -> activeとかにすると対応も可能です。jQueryでもいいですし、究極opacityの値を1にすればいいです。

僕はCSSの対応だけでできました!(なおこの結論に至るまで6時間かかった模様)

a {
    &:active {
        opacity: 1 ;
    }
}

@media screen and (min-width:  960px) {
    a {
        &:hover {
            opacity: 0.8 ;
        }
    }
}

これでPC版はopacity効くけどそれ以外はなしという対応ができます。

同じ問題で困っている方の参考になれば!

25
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
26