アドレスバーがiOS / Android /モバイルChromeを非表示にすると背景画像がジャンプする

現在、Twitter Bootstrapを使用してレスポンシブサイトを開発しています。

このサイトには、モバイル、タブレット、デスクトップにフルスクリーンの背景画像があります。これらの画像は、2つのdivを使用して回転し、それぞれフェードアウトします。

1つの問題を除いて、ほぼ完璧です。iOS Safari、Androidブラウザー、またはAndroid上のChromeを使用すると、ユーザーがページを下にスクロールすると背景がわずかにジャンプし、アドレスバーが非表示になります。

サイトはこちら：http : //lt2.daveclarke.me/

モバイルデバイスでアクセスして下にスクロールすると、画像のサイズ変更/移動が表示されます。

背景DIVに使用しているコードは次のとおりです。

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

すべての提案を歓迎します-これはしばらく頭を使ってきました!!

この問題は、URLバーが高さ100％で「固定」されているため、縮小またはスライドして、＃bg1および＃bg2 divのサイズを変更することにより発生します。背景画像は「カバー」に設定されているため、含まれる領域が大きくなるにつれて、画像のサイズ/位置が調整されます。

サイトの応答性に基づいて、背景はスケーリングする必要があります。私は2つの可能な解決策を楽しみます：

1）＃bg1、＃bg2の高さを100vhに設定します。理論的には、これはエレガントなソリューションです。ただし、iOSにはvhバグがあります（http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/）。問題を回避するためにmax-heightを使用しようとしましたが、それは残りました。

2）ビューポートのサイズは、JavaScriptで決定された場合、URLバーの影響を受けません。したがって、Javascriptを使用して、ビューポートサイズに基づいて＃bg1および＃bg2に静的な高さを設定できます。これは純粋なCSSではなく、ページの読み込み時に画像がわずかにジャンプするため、これは最適なソリューションではありません。ただし、これは、iOSの「vh」バグ（iOS 7では修正されていないようです）を考慮して私が見る唯一の実行可能なソリューションです。

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

余談ですが、iOSとAndroidでこれらのサイズ変更URLバーに非常に多くの問題が発生しました。私は目的を理解していますが、彼らは本当に奇妙な機能とウェブサイトにもたらす大混乱を熟考する必要があります。最新の変更点は、スクロールトリックを使用してiOSまたはChromeでページの読み込み時にURLバーを「非表示」にすることができなくなったことです。

編集：上記のスクリプトは背景のサイズ変更を防ぐために完全に機能しますが、ユーザーが下にスクロールすると目立つギャップが生じます。これは、背景のサイズを画面の高さからURLバーを引いたものの100％に維持しているためです。スイスが示唆するように、高さを60pxに追加すると、この問題はなくなります。これは、URLバーが存在する場合、背景画像の下部60ピクセルが表示されないことを意味しますが、ユーザーにギャップが表示されるのを防ぎます。

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

ジェイソンの答えは私にはうまくいかなかったことがわかり、私はまだジャンプしていました。Javascriptはページの上部にギャップがないことを保証しましたが、アドレスバーが非表示/再表示されるときはいつでも、背景はまだジャンプしていました。そこで、JavaScriptの修正と同様transition: height 999999sに、div に適用しました。これにより、要素が実質的にフリーズするほど長い期間の遷移が作成されます。

私たちのウェブサイトのヘッダーにも同様の問題があります。

html, body {
    height:100%;
}
.header {
    height:100%;
}

.header-containerは、url-barが非表示になり、指が画面から削除された後、再スケーリングされるため、これにより、android chromeでびくびくするスクロールエクスペリエンスが発生します。

CSSソリューション：

次の2行を追加すると、URLバーが非表示になり、垂直スクロールが引き続き可能になります。

html {
    overflow: hidden;
}
body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

この問題は、メディアクエリといくつかの数学で解決できます。以下は、縦向きのソリューションです。

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

URLバーが消えるとvhが変化するので、別の方法で高さを決定する必要があります。ありがたいことに、ビューポートの幅は一定で、モバイルデバイスにはいくつかの異なるアスペクト比しかありません。幅と縦横比を決定できる場合、vh が機能するのとまったく同じように、少し計算するとビューポートの高さがわかります。ここにプロセスがあります

1）ターゲットとするアスペクト比の一連のメディアクエリを作成します。

• アスペクト比の代わりにdevice-aspect-ratioを使用してください。後者は、URLバーが消えたときにサイズが変更されるためです。

• 最も人気のあるものの間でたまたま続くアスペクト比をターゲットにするために、デバイスのアスペクト比に「最大」を追加しました。これらはそれほど正確ではありませんが、それらは少数のユーザー向けであり、適切なvhにかなり近いままです。

• 水平/垂直を使用したメディアクエリを覚えておいてください。そのため、ポートレートのために数値を反転する必要があります。

2）メディアクエリごとに、縦の高さの何パーセントでも、要素をvwにしたい場合は、縦横比の逆数を掛けます。

• 幅と幅と高さの比率がわかっているので、必要な％（この場合は100％）に高さ/幅の比率を掛けます。

3）URLバーの高さを決定し、高さからマイナスする必要があります。正確な測定値は見つかりませんでしたが、横向きのモバイルデバイスでは9％を使用していますが、これはかなりうまくいくようです。

これは非常に洗練されたソリューションではありませんが、他のオプションも次の点を考慮するとあまり良くありません。

• あなたのウェブサイトをユーザーにバグがあるように見せること、

• 不適切なサイズの要素がある、または

• 基本的なスタイル設定にJavaScriptを使用する、

欠点は、一部のデバイスは、最も人気のあるものとは異なるURLバーの高さまたはアスペクト比を持っている可能性があることです。ただし、少数のデバイスで数ピクセルの加算/減算が発生する場合にこの方法を使用すると、スワイプ時にWebサイトのサイズを変更する全員よりもはるかに良いように見えます。

簡単にするために、SASSミックスインも作成しました。

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

ここでのすべての回答はwindow高さを使用しており、URLバーの影響を受けます。誰もがscreen身長を忘れましたか？

ここに私のjQueryソリューションがあります：

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

追加 .css()パーツをすると、必然的に上部に配置された絶対配置要素が下部に配置されるため、ジャンプはまったく発生しません。ただし、通常のCSSに直接追加しない理由はないと思います。

デスクトップの画面の高さは役に立たないので、ユーザーエージェントスニファが必要です。

また、これはすべて仮定です #background、ウィンドウを埋める固定位置要素であるとています。

JavaScript純粋主義者向け（警告-期待外れ）：

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

編集：これは、複数の背景を持つ特定の問題に直接答えることはできません。しかし、これは、モバイルで固定背景がジャンプするというこの問題を検索したときの最初の結果の1つです。

ビューポート全体をカバーするエントランススクリーンを作成しようとしたときにも、この問題に遭遇しました。残念ながら、受け入れられた答えはもはや機能しません。

1）高さに設定された要素 100vhビューポートのサイズが変更されるたびにサイズが変更ように。

2）$(window).height()URLバーのサイズによっても影響を受ける値を返します。

1つの解決策は、AlexKemptonの回答でtransition: height 999999s提案されているように、要素を「フリーズ」することです。欠点は、これにより、画面の回転によるものを含め、すべてのビューポートサイズの変更への適応が事実上無効になることです。

したがって、私の解決策は、JavaScriptを使用してビューポートの変更を手動で管理することです。これにより、URLバーによって引き起こされる可能性のある小さな変更を無視して、大きな変更にのみ反応することができます。

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);

編集：私は実際にこのテクニックを一緒に使用していheight: 100vhます。ページは最初から適切にレンダリングされ、JavaScriptが起動して高さの手動管理を開始します。これにより、ページの読み込み中（またはその後）にちらつきがまったくなくなります。

私は現在使用しているソリューションをチェックすることであるuserAgent上$(document).ready、それは怒らブラウザの一つだかどうかを確認します。その場合は、次の手順に従います。

1. 関連する高さを「100％」ではなく、現在のビューポートの高さに設定します
2. 現在のビューポートの水平値を保存します
3. 次に、で$(window).resize、新しい水平ビューポートの寸法が初期値と異なる場合にのみ、関連する高さの値を更新します
4. 新しい水平値と垂直値を保存する

オプションで、垂直方向のサイズ変更がアドレスバーの高さを超えている場合にのみ、垂直方向のサイズ変更を許可するかどうかをテストすることもできます。

ああ、アドレスバーはに影響します$(window).height。参照：モバイルWebkitブラウザー（クロム）アドレスバーの変更$（window）.height（）; JS「ウィンドウ」の幅と高さ対「スクリーン」の幅と高さのたびにbackground-size：coverを再スケーリングしますか？

私はJavascriptを使わずに本当に簡単な解決策を見つけました：

transition: height 1000000s ease;
-webkit-transition: height 1000000s ease;
-moz-transition: height 1000000s ease;
-o-transition: height 1000000s ease;

これは動きを遅らせるだけなので、目立たないほど信じられないほど遅くなります。

私の解決策は、javascriptの少しを含みました。divで100％または100vhを維持します（これにより、divが最初のページの読み込み時に表示されなくなります）。次に、ページがロードされたら、ウィンドウの高さを取得して、問題の要素に適用します。divに静的な高さがあるため、ジャンプを回避します。

var $hero = $('#hero-wrapper'),
    h     = window.innerHeight;

$hero.css('height', h);

VHユニットを使用するためのバニラJavaScriptソリューションを作成しました。どこでもVHを使用すると、スクロール時に最小化されるアドレスバーによって影響を受けます。ページが再描画されるときに表示されるジャンクを修正するために、VHユニットを使用してすべての要素を取得し（クラスにそれらを与える場合.vh-fix）、インラインのピクセルの高さを与えるこのjsをここに用意しました。基本的に、必要な高さでそれらを凍結します。回転時またはビューポートサイズの変更時にこれを行うと、応答性を維持できます。

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {
    el.style.height = el.clientHeight + 'px'
  }
}

これで私のユースケースはすべて解決しました。

これがこの問題を解決するための私の解決策です。コードにコメントを直接追加しました。私はこのソリューションをテストし、問題なく動作しました。誰もが同じ問題を抱えているために私たちが役立つことを願っています。

//remove height property from file css because we will set it to first run of page
//insert this snippet in a script after declarations of your scripts in your index

var setHeight = function() {    
  var h = $(window).height();   
  $('#bg1, #bg2').css('height', h);
};

setHeight(); // at first run of webpage we set css height with a fixed value

if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
      setHeight(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      setHeight(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $( window ).resize(function() {                           // so in this case we use resize to have
    setHeight();                                            // responsivity resisizing browser window
  }); 
};

これは、私が試したすべての中で最高の（最も簡単な）解決策です。

...そしてこれはアドレスバーのネイティブエクスペリエンスを維持しません！

たとえば、CSSで高さを100％に設定し、ドキュメントが読み込まれるときに、JavaScriptでウィンドウの高さをピクセル単位で0.9 *に設定することができます。

たとえばjQueryの場合：

$("#element").css("height", 0.9*$(window).height());

）

Pもいることminfullこと：残念ながら、純粋なCSSを持つ作品があることは何もありませんvhし、vw-使用率iPhoneでバギーですが。

JavaScriptで幅要素を設定しました。de vhを設定した後。

html

<div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div>

CSS

#gifimage {
    position: absolute;
    height: 70vh;
}

JavaScript

imageHeight = document.getElementById('gifimage').clientHeight;

// if (isMobile)       
document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px");

これは私にとってはうまくいきます。私はjquery ectを使用しません。できるだけ早くロードしたいからです。

この問題の詳細をすべて理解し、最適な実装を見つけるには数時間かかりました。2016年4月の時点で、iOS Chromeのみがこの問題を抱えていることが判明しました。私はAndroid ChromeとiOS Safariを試してみましたが、どちらもこの修正なしで問題ありませんでした。だから私が使っているiOS Chromeの修正は：

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div-with-background-image').css('height', screenHeight + 'px');
});

背景が許せば簡単な答えは、background-size：をメディアクエリでデバイスの幅をカバーする何かに設定し、：after position：fixedと一緒に使用することです。ここをハックする。

IE：background-size：901px; 900px未満の画面の場合 完璧でもレスポンシブでもないが、抽象的なBGを使用しているため、モバイルでは480px未満で魅力的に機能しました。

私はこの回避策を使用しています：ページ読み込み時のbg1の高さを修正します：

var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;

次に、これを行うウィンドウにサイズ変更イベントリスナーをアタッチします。サイズ変更後の高さの差が60ピクセル未満（URLバーの高さを超えるもの）の場合は何もせず、60ピクセルを超える場合は、bg1の高さを親の高さに再度設定します。完全なコード：

window.addEventListener("resize", onResize, false);
var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;
var oldH = BG.parentElement.clientHeight;

function onResize() {
    if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){
      BG.style.height = BG.parentElement.clientHeight + 'px';
      oldH = BG.parentElement.clientHeight;
    }
}

PS：このバグはとてもイライラします！

@AlexKemptonの回答に似ています。（申し訳ありませんがコメントできませんでした）

要素のサイズ変更を防ぐために、長い遷移遅延を使用しています。

例えば：

transition: height 250ms 600s; /*10min delay*/

これとのトレードオフは、デバイスの回転を含む要素のサイズ変更を防ぐことですがorientationchange、これが問題である場合は、JSを使用して高さを検出およびリセットできます。

ChromeモバイルブラウザーがURLバーを表示から非表示に、またはその逆に移行しているときに、ウィンドウの実際の内側の高さと垂直スクロールを聞きたい場合、私が見つけた唯一の解決策は、間隔関数を設定することです。window.innerHeight以前の値との不一致を測定します。

これはこのコードを紹介します：

var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);

これがお役に立てば幸いです。誰かがより良い解決策を知っていますか？

同様の問題が発生したときに私が思いついた解決策は、イベントが発生するwindow.innerHeightたびに要素の高さを設定することtouchmoveでした。

var lastHeight = '';

$(window).on('resize', function () {
    // remove height when normal resize event is fired and content redrawn
    if (lastHeight) {
        $('#bg1').height(lastHeight = '');
    }
}).on('touchmove', function () {
    // when window height changes adjust height of the div
    if (lastHeight != window.innerHeight) {
        $('#bg1').height(lastHeight = window.innerHeight);
    }
});

これにより、エレメントは常に、利用可能な画面のちょうど100％に広がります。アドレスバーを非表示または表示しているときでも。

それでも、そのようなパッチを考え出さposition: fixedなければならないのは残念です。

iOSのCSSカスタムプロパティ（変数）のサポートにより、JSでこれらを設定し、iOSでのみ使用できます。

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

私の答えは、ここに来たすべての人（私がしたように）が、アドレスの非表示/ブラウザインターフェイスによって引き起こされたバグの答えを見つけることです。

アドレスバーを非表示にすると、サイズ変更イベントがトリガーされます。ただし、横長モードへの切り替えなど、他のサイズ変更イベントとは異なり、ウィンドウの幅は変更されません。したがって、私の解決策は、サイズ変更イベントにフックして、幅が同じかどうかを確認することです。

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});