Gambar latar belakang melonjak saat bilah alamat menyembunyikan iOS / Android / Mobile Chrome

Saat ini saya sedang mengembangkan situs responsif menggunakan Bootstrap Twitter.

Situs ini memiliki gambar latar belakang layar penuh di ponsel / tablet / desktop. Gambar-gambar ini berputar dan memudar melalui masing-masing, menggunakan dua div.

Hampir sempurna, kecuali satu masalah. Menggunakan iOS Safari, Browser Android atau Chrome di Android latar belakang sedikit melompat ketika pengguna menggulir ke bawah halaman dan menyebabkan bilah alamat bersembunyi.

Situsnya ada di sini: http://lt2.daveclarke.me/

Kunjungi di perangkat seluler dan gulir ke bawah dan Anda akan melihat ukuran gambar / pindahkan.

Kode yang saya gunakan untuk DIV latar belakang adalah sebagai berikut:

#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;
}

Semua saran diterima - ini sudah cukup lama saya lakukan !!

Masalah ini disebabkan oleh bilah URL menyusut / meluncur keluar dari jalan dan mengubah ukuran div # bg1 dan # bg2 karena mereka 100% tinggi dan "tetap". Karena gambar latar diatur ke "cover", gambar akan menyesuaikan ukuran / posisi gambar karena area yang mengandung lebih besar.

Berdasarkan sifat responsif situs, latar belakang harus diukur. Saya menghibur dua solusi yang mungkin:

1) Atur # bg1, # bg2 tinggi ke 100vh. Secara teori, ini solusi yang elegan. Namun, iOS memiliki vh bug ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Saya mencoba menggunakan ketinggian max untuk mencegah masalah, tetapi tetap saja.

2) Ukuran viewport, ketika ditentukan oleh Javascript, tidak terpengaruh oleh bilah URL. Oleh karena itu, Javascript dapat digunakan untuk mengatur ketinggian statis pada # bg1 dan # bg2 berdasarkan ukuran viewport. Ini bukan solusi terbaik karena ini bukan CSS murni dan ada sedikit lompatan gambar pada pemuatan halaman. Namun, ini adalah satu-satunya solusi yang saya lihat mengingat bug "vh" iOS (yang tampaknya tidak diperbaiki di iOS 7).

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

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

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

Di samping catatan, saya telah melihat begitu banyak masalah dengan bilah ukuran URL ini di iOS dan Android. Saya mengerti tujuannya, tetapi mereka benar-benar perlu memikirkan fungsionalitas aneh dan malapetaka yang mereka bawa ke situs web. Perubahan terbaru, adalah Anda tidak lagi dapat "menyembunyikan" bilah URL saat memuat halaman di iOS atau Chrome menggunakan trik gulir.

EDIT: Meskipun skrip di atas berfungsi dengan baik untuk menjaga ukuran latar belakang, itu menyebabkan jeda ketika pengguna menggulir ke bawah. Ini karena menjaga ukuran latar belakang hingga 100% dari tinggi layar dikurangi bilah URL. Jika kita menambahkan 60px ke ketinggian, seperti yang disarankan swiss, masalah ini hilang. Itu berarti kita tidak bisa melihat 60px bawah gambar latar belakang ketika URL bar hadir, tetapi itu mencegah pengguna dari pernah melihat celah.

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

Saya menemukan bahwa jawaban Jason tidak bekerja untuk saya dan saya masih mendapatkan lompatan. Javascript memastikan tidak ada celah di bagian atas halaman tetapi latar belakang masih melompat setiap kali bilah alamat menghilang / muncul kembali. Jadi seperti halnya memperbaiki Javascript, saya melamar transition: height 999999ske div. Ini menciptakan transisi dengan durasi yang sangat lama sehingga hampir membekukan elemen.

Saya punya masalah serupa di tajuk situs web kami.

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

Ini akan berakhir dalam pengalaman gulir yang gelisah pada android chrome, karena .header-container akan kembali skala setelah bar-url bersembunyi dan jari dihapus dari layar.

Solusi-CSS:

Menambahkan dua baris berikut, akan mencegah bahwa bar-url menyembunyikan dan pengguliran vertikal masih dimungkinkan:

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

Masalahnya dapat diselesaikan dengan kueri media dan beberapa matematika. Inilah solusi untuk orientasi portait:

@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%);
}

Karena vh akan berubah ketika bilah url menghilang, Anda harus menentukan ketinggian dengan cara lain. Untungnya, lebar viewport konstan dan perangkat seluler hanya memiliki beberapa rasio aspek yang berbeda; jika Anda dapat menentukan lebar dan rasio aspek, sedikit matematika akan memberi Anda ketinggian viewport persis seperti yang seharusnya bekerja. Inilah prosesnya

1) Buat serangkaian kueri media untuk rasio aspek yang ingin Anda targetkan.

• gunakan rasio aspek-perangkat alih-alih rasio aspek karena yang terakhir akan mengubah ukuran ketika bilah url menghilang

• Saya menambahkan 'max' ke rasio aspek-perangkat untuk menargetkan setiap rasio aspek yang terjadi di antara yang paling populer. Mereka tidak akan setepat itu, tetapi mereka hanya akan untuk sebagian kecil pengguna dan masih akan cukup dekat dengan vh yang tepat.

• ingat kueri media menggunakan horisontal / vertikal, jadi untuk portait Anda perlu membalik angka

2) untuk setiap kueri media, gandakan persentase tinggi vertikal apa pun yang Anda inginkan elemen di dalam dengan kebalikan dari rasio aspek.

• Karena Anda tahu lebar dan rasio lebar ke tinggi, Anda hanya mengalikan% yang Anda inginkan (100% dalam kasus Anda) dengan rasio tinggi / lebar.

3) Anda harus menentukan tinggi bar url, dan kemudian minusnya dari ketinggian. Saya belum menemukan pengukuran yang tepat, tetapi saya menggunakan 9% untuk perangkat seluler dalam lanskap dan itu tampaknya bekerja cukup baik.

Ini bukan solusi yang sangat elegan, tetapi opsi lain juga tidak terlalu bagus, mengingat mereka adalah:

• Membuat situs web Anda terlihat bermasalah bagi pengguna,

• memiliki elemen berukuran tidak tepat, atau

• Menggunakan javascript untuk beberapa gaya dasar ,

Kekurangannya adalah beberapa perangkat mungkin memiliki ketinggian url bar berbeda atau rasio aspek dari yang paling populer. Namun, menggunakan metode ini jika hanya sejumlah kecil perangkat mengalami penambahan / pengurangan beberapa piksel, yang tampaknya jauh lebih baik bagi saya daripada semua orang yang memiliki ukuran situs web ketika menggesek.

Untuk membuatnya lebih mudah, saya juga membuat mixin 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%);
  }
}

Semua jawaban di sini menggunakan windowtinggi, yang dipengaruhi oleh bilah URL. Apakah semua orang lupa tentang screenketinggian?

Inilah solusi jQuery saya:

$(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);
  }
});

Menambahkan .css()bagian adalah mengubah elemen posisi absolut tak terhindarkan atas atas ke bawah, sehingga tidak ada lompatan sama sekali. Meskipun, saya kira tidak ada alasan untuk tidak langsung menambahkannya ke CSS normal.

Kami membutuhkan sniffer agen pengguna karena ketinggian layar di desktop tidak akan membantu.

Juga, ini semua mengasumsikan #backgroundadalah elemen posisi tetap mengisi jendela.

Untuk pemurni JavaScript (peringatan - belum teruji):

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;
}

EDIT: Maaf ini tidak langsung menjawab masalah spesifik Anda dengan lebih dari satu latar belakang. Tapi ini adalah salah satu hasil pertama ketika mencari masalah latar belakang tetap melompat di ponsel.

Saya mengalami masalah ini juga ketika saya mencoba untuk membuat layar masuk yang akan menutupi seluruh viewport. Sayangnya, jawaban yang diterima tidak lagi berfungsi.

1) Elemen dengan ketinggian yang disetel untuk 100vhdiubah ukurannya setiap kali ukuran viewport berubah, termasuk kasus-kasus ketika itu disebabkan oleh (dis) muncul bilah URL.

2) $(window).height()mengembalikan nilai juga dipengaruhi oleh ukuran bilah URL.

Salah satu solusinya adalah "membekukan" elemen menggunakan transition: height 999999sseperti yang disarankan dalam jawaban oleh AlexKempton . Kerugiannya adalah ini secara efektif menonaktifkan adaptasi untuk semua perubahan ukuran viewport, termasuk yang disebabkan oleh rotasi layar.

Jadi solusi saya adalah mengelola perubahan viewport secara manual menggunakan JavaScript. Itu memungkinkan saya untuk mengabaikan perubahan kecil yang kemungkinan disebabkan oleh bilah URL dan hanya bereaksi pada yang besar.

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);

EDIT: Saya benar-benar menggunakan teknik ini bersama dengan height: 100vh. Halaman ini ditampilkan dengan benar dari awal dan kemudian javascript menendang dan mulai mengelola ketinggian secara manual. Dengan cara ini tidak ada berkedip sama sekali saat halaman sedang memuat (atau bahkan sesudahnya).

Solusi Saat ini saya menggunakan adalah untuk memeriksa userAgentdi $(document).readyuntuk melihat apakah itu salah satu browser menyinggung. Jika ya, ikuti langkah-langkah ini:

1. Atur ketinggian yang relevan ke ketinggian viewport saat ini daripada '100%'
2. Menyimpan nilai horizontal viewport saat ini
3. Kemudian, aktif $(window).resize, hanya perbarui nilai ketinggian yang relevan jika dimensi viewport horizontal baru berbeda dari nilai awalnya
4. Simpan nilai horisontal & vertikal baru

Secara opsional, Anda juga dapat menguji izin untuk mengubah ukuran vertikal hanya ketika mereka melampaui ketinggian bilah alamat.

Oh, dan bilah alamat tidak memengaruhi $(window).height. Lihat: bilah alamat browser Webkit Mobile (chrome) mengubah $ (window) .height (); membuat ukuran latar belakang: tutup kembali skala setiap kali JS "Window" lebar-tinggi vs "layar" lebar-tinggi?

Saya menemukan solusi yang sangat mudah tanpa menggunakan Javascript:

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

Yang dilakukan adalah menunda gerakan sehingga sangat lambat sehingga tidak terlihat.

Solusi saya melibatkan sedikit javascript. Simpan 100% atau 100vh pada div (ini akan menghindari div tidak muncul pada pemuatan halaman awal). Kemudian ketika halaman dimuat, ambil tinggi jendela dan terapkan pada elemen yang dimaksud. Hindari lompatan karena sekarang Anda memiliki ketinggian statis pada div Anda.

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

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

Saya membuat solusi javascript vanilla untuk menggunakan unit VH. Menggunakan VH hampir di mana saja dipengaruhi oleh address bar yang meminimalkan scroll. Untuk memperbaiki jank yang menunjukkan kapan halaman digambar ulang, saya punya js ini di sini yang akan mengambil semua elemen Anda menggunakan unit VH (jika Anda memberi mereka kelas .vh-fix), dan memberi mereka ketinggian pixel inline. Pada dasarnya membekukan mereka pada ketinggian yang kita inginkan. Anda bisa melakukan ini secara rotasi atau mengubah ukuran viewport agar tetap responsif.

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'
  }
}

Ini telah menyelesaikan semua kasus penggunaan saya, semoga membantu.

ini solusi saya untuk mengatasi masalah ini, saya telah menambahkan komentar langsung pada kode. Saya telah menguji solusi ini dan berfungsi dengan baik. Semoga kita akan bermanfaat karena setiap orang memiliki masalah yang sama.

//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
  }); 
};

Ini adalah solusi terbaik (paling sederhana) di atas semua yang saya coba.

... Dan ini tidak menyimpan pengalaman asli bilah alamat !

Anda dapat mengatur ketinggian dengan CSS menjadi 100% misalnya, dan kemudian mengatur ketinggian ke 0,9 * tinggi jendela dalam px dengan javascript, ketika dokumen dimuat.

Misalnya dengan jQuery:

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

)

Sayangnya tidak ada apa pun yang bekerja dengan CSS murni: P tetapi juga minfull itu vhdan vwbuggy di iPhone - gunakan persentase.

Saya mengatur elemen lebar saya, dengan javascript. Setelah saya mengatur 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");

Ini bekerja untuk saya. Saya tidak menggunakan jquery dll. karena saya ingin memuat secepat mungkin.

Butuh beberapa jam untuk memahami semua detail masalah ini dan mencari tahu penerapan terbaiknya. Ternyata per April 2016 hanya iOS Chrome yang memiliki masalah ini. Saya mencoba di Android Chrome dan iOS Safari - keduanya baik-baik saja tanpa perbaikan ini. Jadi perbaikan untuk iOS Chrome yang saya gunakan adalah:

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

Jawaban sederhana jika latar belakang Anda memungkinkan, mengapa tidak mengatur ukuran latar belakang: untuk sesuatu yang hanya menutupi lebar perangkat dengan kueri media dan gunakan di samping: setelah posisi: tetap; retas di sini .

IE: ukuran latar: 901px; untuk layar apa saja <900px? Tidak sempurna atau responsif tetapi berhasil membuat saya tertarik pada ponsel <480px karena saya menggunakan BG abstrak.

Saya menggunakan solusi ini: Perbaiki tinggi bg1 pada pemuatan halaman dengan:

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

Kemudian lampirkan pendengar acara ukuran ke Window yang melakukan ini: jika perbedaan ketinggian setelah mengubah ukuran kurang dari 60px (apa pun lebih dari tinggi url bar) maka jangan lakukan apa pun dan jika lebih besar dari 60px maka atur tinggi bg1 lagi ke tinggi induknya! kode lengkap:

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: Bug ini sangat menjengkelkan!

Mirip dengan jawaban @AlexKempton. (tidak bisa berkomentar maaf)

Saya telah menggunakan penundaan transisi yang lama untuk mencegah pengubahan ukuran elemen.

misalnya:

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

Pengorbanannya adalah ini mencegah perubahan ukuran elemen termasuk pada perputaran perangkat, namun, Anda dapat menggunakan beberapa JS untuk mendeteksi orientationchangedan mengatur ulang ketinggian jika ini merupakan masalah.

Bagi mereka yang ingin mendengarkan ketinggian bagian dalam aktual dan gulir vertikal jendela saat browser seluler Chrome mentransisikan bilah URL dari yang ditampilkan ke tersembunyi dan sebaliknya, satu-satunya solusi yang saya temukan adalah mengatur fungsi interval, dan mengukur perbedaan window.innerHeightdengan nilai sebelumnya.

Ini memperkenalkan kode ini:

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);

Saya harap ini berguna. Adakah yang tahu solusi yang lebih baik?

Solusi yang saya temukan ketika mengalami masalah serupa adalah mengatur ketinggian elemen window.innerHeightsetiap kali touchmoveperistiwa dipecat.

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);
    }
});

Hal ini membuat rentang elemen tepat 100% dari layar yang tersedia setiap saat, tidak lebih dan tidak kurang. Bahkan selama bilah alamat bersembunyi atau ditampilkan.

Namun sayang sekali kita harus menemukan tambalan semacam itu, di mana cara sederhana position: fixedseharusnya berhasil.

Dengan dukungan properti khusus CSS (variabel) di iOS, Anda dapat mengatur ini dengan JS dan menggunakannya hanya di 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);
        }
    }
}

Jawaban saya adalah untuk semua orang yang datang ke sini (seperti yang saya lakukan) untuk menemukan jawaban untuk bug yang disebabkan oleh antarmuka persembunyian bare / browser.

Bilah alamat penyembunyian menyebabkan peristiwa pengubahan ukuran memicu. Tetapi berbeda dari peristiwa pengubahan ukuran lainnya, seperti beralih ke mode lansekap, ini tidak mengubah lebar jendela. Jadi solusi saya adalah untuk menghubungkan ke acara pengubahan ukuran dan memeriksa apakah lebarnya sama.

// 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
    // ...
});