Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

概要

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.
})();
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away