IOS8.1.3が公開されたけど…Phone6 iOS8 Safariブラウザバグまとめ
スマホサイト制作の検証はandroidは2.3以降、iPhoneはiOS6以降というケースが多いと思います。
そのなかでもandroid2系の対応は骨が折れますよね。。。
しかしこの検証端末の中にiPhone6 iOS8が追加され、iOS8も油断ならぬ存在です。
先週IOS8.1.3が公開され IOS8.2が公開されIOS8.3IOS8.4が公開されバグもほとんど無くなってきてますが、
アップデートをした事が無い、したくない。というユーザーもいるのではないでしょうか？
というわけでIOS8のsafariのブラウザバグをこの辺でまとめておきたいと思います。
viewportが切り替わりページ読み込み時に上部に空白が出る
これはスクラッチでPC、SPを作成している環境で確認した事があるのですが、異なるviewpot設定のページへ遷移した際にページがスクロールされた状態で表示されるというものです。(リロードすれば直る)下記ページではIOS8のViewport設定の仕様によるバグと報告されています。
【参考サイト】
http://www.domore.co.jp/mobify/support/cat01/20141003/
※その他バグではありませんがIOS8は下記の様に表示の設定を切り替える事ができるという事を
頭に入れておいた方がいいと思います。
デスクトップ用に切り替える
この機能を使うとブラウザのUserAgentがMac OS Xに切り替わり、PCサイト表示に切り替わるという物です。
【参考サイト】
http://qiita.com/forty4_jp/items/d77dcdb953ea41e1e50c
画面表示の拡大設定
設定を変える事でviewportの値が変わってしまう。(同じ端末でもviewportが変わってしまうという事)
【参考サイト】
http://girigiribauer.com/archives/1665
zoomプロパティが無効になる(zoom:0.5;)
iPhone5まではwidthは320pxで統一されていてdevicePixelRatioも統一されていたので、
単純に640pxをズームで小さくする様にしていたサイトは見直しが必要かもしれません。
【参考サイト】
http://roka404.main.jp/blog/archives/110
「window.close()」が機能しない。
スマホサイトでjavascriptのwindow.close()はあまり利用しませんが、PCサイトでたまに見受けられます。※iOS8.1.1で解決済み
【参考サイト】
http://webdev.jp.net/ios8-window-close-bug/
スクロールするだけでresizeイベントが発生する
resizeイベントは基本的には傾き等を監視したりして条件分を出すと思うのでそれほど影響は出ないかもしれませんが、見た目には気づかずに不要なプログラムが走り出してサイトを重くしてしまうかもしれません。
【参考サイト】
http://iwb.jp/ios8-safari-scroll-resize/
inputに未確定のテキストがある状態でval()変更すると未確定テキストが入力される
本来はval()で上書きされるべき所が未確定の文字で上書きされてしまうバグ。
【参考サイト】
http://jsdo.it/yuyaohshimo/cHqE
inputにfocus中スクロールが出来る様になり、更にposition:fixed要素が消える
こちらはinputにfocusした際に固定されるはずの画面がスクロールできる様になり、
尚かつスクロール中はposition:fixedのheaderが消えてしまうという物
【参考サイト】
https://github.com/driftyco/ionic/issues/2285
position:fixed要素にあるinputにfacusすると一番上までスクロールする。
タイトル通りですが、キーボードが出る事でスクロールの外に動くというもの。
【参考サイト】
http://ja.stackoverflow.com/questions/2979/
input type=”button”がinput type=”text”のようにfocusされボタンが押せなくなる
プラグイン「jquery alert dialogs」を使っているサイトで確認したのですがダイアログを出すと確認ボタンにtype="text"があるかの様にカーソルがfocusされボタンが押せなくなります。
【参考サイト】
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
PDF周りのバグ
PDF周りは結構報告があります。
・PDF内のリンクが効かない、
・iframe内でPDFを読み込むと次のページが見れない。
・PDFの比率がおかしくなる。
などなど…
【参考サイト】
http://shimax.cocolog-nifty.com/search/2014/09/ios-80-safari-1.html
webkit-overflow-scrollingを指定している要素が消える(2015年5月追加)
慣性スクロールのプロパティーwebkit-overflow-scrollingがありますが、display:noneの状態からJSで表示させるような状況下でoverflowの指定を合わせてしていると起こるようです。
【参考サイト】
http://2eb.jp/ios8-overflow-scrolling/
iOS 8.4.1からリンクを2回タップしないとaタグでページ遷移出来ない(2015年8月追加)
CSSの:hoverが１クリックカウントされるようで一度ではページ遷移出来ないようです。対処法としては「:hoverを:activeに変更する」「jQueryを使う」など。hoverアクションを無しする事で解決できるようです。
【参考サイト】
http://webskillup.com/ety/20150816234007/
以上になりますが、iPhone6からデバイスのサイズが変わったため
viewportや、zoomなど表示サイズ周りの仕様にバグが多く見受けられます。後はinput、PDF周りもあわせて注意が必要そうです。また新しく見つけた場合には追加していきたいと思います。
Related posts
