deeplus+

動作確認時に見つけた(見つかった)諸々の不具合をまとめている覚え書きです。対象バージョンは遭遇したもので他でも起こる可能性があります。

1. iOS/safari

何はともあれ、jQueryでは色々あるのでユーザーエージェント判別は必須です。

//モバイルユーザーエージェント判別
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) ||
      u.indexOf("ipad") != -1 ||
      (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) ||
      (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) ||
      u.indexOf("kindle") != -1 ||
      u.indexOf("silk") != -1 ||
      u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1) ||
      u.indexOf("iphone") != -1 ||
      u.indexOf("ipod") != -1 ||
      (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) ||
      (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) ||
      u.indexOf("blackberry") != -1
  };
})(window.navigator.userAgent.toLowerCase());
//safari判別
var _ua_isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

参照元： 2015年版JavaScriptユーザエージェント判別・判定

iOS/safari

iOS9ではこの不具合はなくなっています。aタグをタップしてもリンクせず、もう一度タップするとリンク先に飛べるというもの。 jQueryを使えない場合はメディアクエリでhoverの動きを変えるしかありませんが、 iPadに対応させると1024pxで切らなければならないので、ウインドウサイズを小さめに開いているPCもかなりの部分で対象に...。
そもそもiOSではhoverの挙動自体がClickしたら、そのままでは戻ってくれないとか色々あるので、jQueryでbodyにclassを追加して、PC以外にhoverが効かないようにしています。

上のブラウザ判別を入れたら、後はpc時にclassを追加。hoverの指定のある所を分離して、頭にbody.pc-hover a.sample-btn:hover{…}みたいに指定すればOKです。

var PChover = function() {
  $(window).on('load resize orientationchange', function() {
    if(_ua.Mobile || _ua.Tablet) {
      //この中のコードはスマホとタブレットにのみ適用
      $('body').removeClass('pc-hover');
    } else {
      //この中のコードはスマホとタブレット以外に適用
      $('body').addClass('pc-hover');
    }
  });
};
$(function(){
  PChover();
});

参照元： iOS8.4.1でhoverの設定がされていると2回タップしないといけない

iOSにカテゴライズしていますがMac/safari5でも起こります。見出しだけ見るとナビとか最前面にあるなら問題無さそうですが、スクロール中にチカチカするので気にはなります。 該当箇所のclassに-webkit-transform: translate3d(0,0,0);を追加すれば解決！ と思いきや...translate3dを設定することによって、 Androidでは別のtransformが効かなくなるバグがあるので。 ユーザーエージェント判別でclassを出し分けて、safariにだけ適用する必要があります。
参照元ではiOS/Chromeも対象になっていますが2016.04現在iOS9/Chrome50では起こらないようです。

if(_ua_isSafari) {$('.class').css('-webkit-transform','translate3d(0,0,0)');}

参照元：

• iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ
• iOS の position:fixed バグ回避方法

jQueryプラグインのSwiper、jcarousel.responsiveで確認。ブレークポイントを認識せずに画面外まではみ出して挙動もカクカクに。 元々iframeを使った理由がページの特定部分の読み込むタイミングを遅らせるためだけだったので、指定したidに.loadで外部ファイルを読み込み、 ファイルが読み込んだのを確認してからプラグインを実行することで解決しました。

$('#load').load('contents.html', function() {
  $('.swiper-container').swiper({
    …
  });
});