iOS7 Safari固定要素問題の回避策

概要

iOS7 SafariでURL・ブックマークバーが表示・非表示になる仕様変更を行ったため、position: fixed;などで上下に要素を固定している場合にバグが発生することが出てきました。

バグ一例

• 上部（または下部）固定したナビゲーションに、表示したURLバーがかぶさる
• 一定条件下で、固定したエリアのクリック・タップイベントが起こらない
  • URLバーが表示に切り替わった直後、画面をスクロールせずにボタンを押すと問題が発生（固定ヘッダーの位置が変わるため起こっている？）

等々

回避策

resizeイベントが発生しないということで回避策に困っていましたが、

参考：iOS7 では URL バーの表示／非表示が切り替わるタイミングのイベントが走らない

下記の方法に辿りつきました。

Safari on IOS7 – Address and Bookmark Bars Fixed Position Bug

ざっくり説明すると、“実際のscreenの高さとviewportの高さを一定時間ごとに比べて、監視を続ける”という感じです。
とても無理やりな感じですがどうしても対応しなくてはならない場合は、この方法を検討してみるのもいいかもしれません。

下記コードは参考元のママコピペですがメモまでに。

/**
 * This fix should only be applied when your content is shown. In my case it was a modal so this script is only executed
 * on Safari on IOS7 when my modal is shown and stopped once the modal is closed.
 */
(function(){
  var ios7bars = null, // Variable to hold the state of the address and bookmarks bar so the event is triggered only once per state once.
      refresh = function(){ // This function forces Safari to redraw the page and triggers the window resize event that was removed.
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
        window.dispatchEvent(new Event('resize'));
      };

  setInterval(function(){
    var landscape = window.orientation == 90 || window.orientation == -90,
        viewportHeight = window.innerHeight,
        // The testHeight is based off the actual screen height multiplied by a fudge factor that allows for the status and mini address bar in portrait mode and the fullscreen in landscape mode.
        testHeight = (landscape ? screen.availWidth : screen.availHeight) * 0.85;

    if ((ios7bars == null || ios7bars == false) && ((landscape && viewportHeight < testHeight) || (!landscape && viewportHeight < testHeight))){
      ios7bars = true;
      refresh();
    } else if ((ios7bars == null || ios7bars == true) && ((landscape && viewportHeight > testHeight) || (!landscape && viewportHeight > testHeight))) {
      ios7bars = false;
      refresh();
    }
  }, 500); // To get a better response to the bars being toggled you can lower the interval however the lower you go the more page performance on a whole may slow down.
})();