[緊急] iOS 8.4.1 の :hover バグをユーザーエージェント切り替えで対処 [IE7対応]
:hover で透明度変更などを指定している場合、iOS 8.4.1 で二回タップしないとリンクしてくれない件が厄介。
というわけで、ユーザーエージェント切り替えで対処する。
何でもかんでもjQueryに頼るのは好ましくないが、時間的余裕はないため緊急作成。
検証済みブラウザとOS
- IE 7～
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1 / 5
要点とコード
デバイスが iPhone/iPad/iPod でない場合にのみ、透過用のCSSクラスを付与。
1 2 3 4 | <a href=""><img src="images/ph_001.jpg"></a> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="ios.js"></script> |
1 2 3 4 5 6 | @charset "utf-8"; @import "compass"; .opacity:hover img { @include opacity(0.8); } |
1 2 3 4 | .opacity:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; } |
1 2 3 4 5 6 7 8 9 10 11 12 | $(function() { var ua = navigator.userAgent.toLowerCase(), iphone = ua.indexOf("iphone") >= 0, ipad = ua.indexOf("ipad") >= 0, ipod = ua.indexOf("ipod") >= 0; if (iphone || ipad || ipod) { } else { $("a").addClass("opacity"); } }); |
コメントを投稿する