L'immagine di sfondo salta quando la barra degli indirizzi nasconde iOS / Android / Mobile Chrome

Attualmente sto sviluppando un sito reattivo utilizzando Twitter Bootstrap.

Il sito ha un'immagine di sfondo a schermo intero su dispositivi mobili / tablet / desktop. Queste immagini ruotano e si dissolvono in ciascuna di esse, utilizzando due div.

È quasi perfetto, tranne un problema. Utilizzando iOS Safari, Browser Android o Chrome su Android, lo sfondo salta leggermente quando un utente scorre la pagina e fa nascondere la barra degli indirizzi.

Il sito è qui: http://lt2.daveclarke.me/

Visitalo su un dispositivo mobile e scorri verso il basso e dovresti vedere l'immagine ridimensionare / spostare.

Il codice che sto usando per il DIV in background è il seguente:

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

Tutti i suggerimenti sono ben accetti: questo mi fa impazzire da un po 'di tempo !!

Questo problema è causato dalle barre degli URL che si restringono / scivolano di mezzo e cambiano la dimensione dei div # bg1 e # bg2 poiché sono al 100% di altezza e "fissi". Poiché l'immagine di sfondo è impostata su "copertina", regolerà la dimensione / posizione dell'immagine man mano che l'area di contenimento è più grande.

In base alla natura reattiva del sito, lo sfondo deve ridimensionare. Intrattengo due possibili soluzioni:

1) Impostare l'altezza # bg1, # bg2 su 100vh. In teoria, questa è una soluzione elegante. Tuttavia, iOS ha un bug vh ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Ho tentato di utilizzare un'altezza massima per evitare il problema, ma è rimasto.

2) La dimensione del viewport, quando determinata da Javascript, non è influenzata dalla barra degli URL. Pertanto, Javascript può essere utilizzato per impostare un'altezza statica su # bg1 e # bg2 in base alla dimensione della finestra. Questa non è la soluzione migliore in quanto non è puro CSS e c'è un leggero salto di immagine al caricamento della pagina. Tuttavia, è l'unica soluzione praticabile che vedo considerando i bug "vh" di iOS (che non sembrano essere stati corretti in iOS 7).

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

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

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

In una nota a margine, ho visto così tanti problemi con queste barre URL di ridimensionamento in iOS e Android. Capisco lo scopo, ma hanno davvero bisogno di pensare attraverso la strana funzionalità e il caos che portano ai siti Web. L'ultima modifica, è che non è più possibile "nascondere" la barra degli URL al caricamento della pagina su iOS o Chrome utilizzando i trucchi di scorrimento.

EDIT: Mentre lo script sopra funziona perfettamente per impedire il ridimensionamento dello sfondo, provoca uno spazio evidente quando gli utenti scorrono verso il basso. Questo perché mantiene le dimensioni dello sfondo al 100% dell'altezza dello schermo meno la barra dell'URL. Se aggiungiamo 60 px all'altezza, come suggerisce Swiss, questo problema scompare. Ciò significa che non possiamo vedere i 60 pixel inferiori dell'immagine di sfondo quando è presente la barra degli URL, ma impedisce agli utenti di vedere mai un vuoto.

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

Ho scoperto che la risposta di Jason non funzionava abbastanza per me e stavo ancora facendo un salto. Il Javascript ha assicurato che non c'era spazio nella parte superiore della pagina, ma lo sfondo continuava a saltare ogni volta che la barra degli indirizzi scompariva / riappariva. Quindi, oltre alla correzione Javascript, ho applicato transition: height 999999sal div. Questo crea una transizione con una durata così lunga da congelare virtualmente l'elemento.

Ho un problema simile su un'intestazione del nostro sito Web.

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

Questo finirà con un'esperienza di scorrimento instabile su Android Chrome, perché il contenitore .header ridimensionerà dopo che la barra dell'url si nasconde e il dito viene rimosso dallo schermo.

CSS-Solution:

Aggiungendo le due righe seguenti, si eviterà che la barra dell'URL si nasconda e lo scorrimento verticale sia ancora possibile:

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

Il problema può essere risolto con una query multimediale e alcuni calcoli matematici. Ecco una soluzione per l'orientamento del 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%);
}

Poiché vh cambierà quando la barra dell'URL scompare, devi determinare l'altezza in un altro modo. Per fortuna, l'ampiezza del viewport è costante e i dispositivi mobili sono disponibili solo in diverse proporzioni; se riesci a determinare la larghezza e le proporzioni, un po 'di matematica ti darà l'altezza della finestra esattamente come dovrebbe funzionare vh . Ecco il processo

1) Creare una serie di media query per le proporzioni che si desidera targetizzare.

• usa le proporzioni del dispositivo anziché le proporzioni perché quest'ultima si ridimensionerà quando la barra dell'URL scompare

• Ho aggiunto 'max' al rapporto aspetto-dispositivo per scegliere come target qualsiasi rapporto che si verifichi tra i più popolari. Non saranno così precisi, ma lo saranno solo per una minoranza di utenti e saranno comunque abbastanza vicini al VH corretto.

• ricorda la media query usando orizzontale / verticale, quindi per portait dovrai capovolgere i numeri

2) per ogni media query moltiplica la percentuale di altezza verticale che vuoi che l'elemento sia in vw per il retro delle proporzioni.

• Poiché conosci la larghezza e il rapporto tra larghezza e altezza, devi solo moltiplicare la% desiderata (100% nel tuo caso) per il rapporto altezza / larghezza.

3) Devi determinare l'altezza della barra dell'url, quindi meno quella dall'altezza. Non ho trovato misurazioni esatte, ma uso il 9% per dispositivi mobili in orizzontale e sembra funzionare abbastanza bene.

Questa non è una soluzione molto elegante, ma anche le altre opzioni non sono molto buone, considerando che sono:

• Avere il tuo sito web sembrare buggy all'utente,

• avere elementi di dimensioni errate, o

• Utilizzando JavaScript per alcuni stili di base ,

Lo svantaggio è che alcuni dispositivi possono avere diverse altezze della barra dell'URL o rapporti di aspetto rispetto ai più popolari. Tuttavia, usando questo metodo se solo un piccolo numero di dispositivi subisce l'aggiunta / sottrazione di pochi pixel, mi sembra molto meglio di chiunque abbia un ridimensionamento del sito Web quando si scorre.

Per semplificare, ho anche creato un 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%);
  }
}

Tutte le risposte qui utilizzano l' windowaltezza, che è influenzata dalla barra degli URL. Tutti si sono dimenticati screendell'altezza?

Ecco la mia soluzione 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);
  }
});

L'aggiunta della .css()parte sta cambiando inevitabilmente l'elemento posizionato assoluto allineato in alto in quello allineato in basso, quindi non c'è alcun salto. Anche se, suppongo non ci sia motivo di non aggiungerlo direttamente al normale CSS.

Abbiamo bisogno dello sniffer dell'agente utente perché l'altezza dello schermo sui desktop non sarebbe utile.

Inoltre, tutto ciò presuppone che #backgroundsia un elemento a posizione fissa che riempie la finestra.

Per i puristi JavaScript (avviso - non testato):

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: mi dispiace che questo non risponda direttamente al tuo problema specifico con più di uno sfondo. Ma questo è uno dei primi risultati quando si cerca questo problema di sfondi fissi che saltano sul cellulare.

Mi sono imbattuto in questo problema anche quando stavo cercando di creare una schermata di entrata che coprisse l'intero viewport. Sfortunatamente, la risposta accettata non funziona più.

1) Elementi con l'altezza impostata per 100vhridimensionarsi ogni volta che la dimensione della finestra cambia, inclusi quei casi in cui è causata dalla (dis) barra degli URL.

2) $(window).height()restituisce valori influenzati anche dalla dimensione della barra dell'URL.

Una soluzione è "congelare" l'elemento usando transition: height 999999scome suggerito nella risposta di AlexKempton . Lo svantaggio è che ciò disabilita efficacemente l'adattamento a tutte le modifiche alle dimensioni della finestra, comprese quelle causate dalla rotazione dello schermo.

Quindi la mia soluzione è gestire manualmente le modifiche al viewport usando JavaScript. Ciò mi consente di ignorare i piccoli cambiamenti che possono essere causati dalla barra degli URL e di reagire solo a quelli più grandi.

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: uso effettivamente questa tecnica insieme a height: 100vh. La pagina viene visualizzata correttamente fin dall'inizio e quindi javascript entra in funzione e inizia a gestire l'altezza manualmente. In questo modo non vi è alcun sfarfallio durante il caricamento della pagina (o anche in seguito).

La soluzione Attualmente sto usando è quello di verificare la userAgentsu $(document).readyper vedere se si tratta di uno dei browser offendere. In tal caso, attenersi alla seguente procedura:

1. Impostare le altezze pertinenti sull'altezza della finestra corrente anziché su "100%"
2. Memorizza il valore orizzontale della finestra corrente
3. Quindi, attivo $(window).resize, aggiorna i valori di altezza pertinenti solo se la nuova dimensione della finestra orizzontale è diversa dal suo valore iniziale
4. Memorizza i nuovi valori orizzontali e verticali

Facoltativamente, puoi anche provare a consentire ridimensionamenti verticali solo quando sono oltre l'altezza della barra degli indirizzi.

Oh, e la barra degli indirizzi ha effetto $(window).height. Vedi: La barra degli indirizzi del browser Webkit mobile (chrome) cambia $ (finestra) .height (); fare sfondo: ridimensionare la copertina ogni volta che JS "Finestra" larghezza-altezza contro "schermo" larghezza-altezza?

Ho trovato una soluzione davvero semplice senza l'uso di Javascript:

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

Tutto ciò che fa è ritardare il movimento in modo che sia incredibilmente lento che non si nota.

La mia soluzione prevedeva un po 'di javascript. Mantenere il 100% o 100vh sul div (questo eviterà che il div non compaia al caricamento della pagina iniziale). Quindi, quando la pagina viene caricata, afferrare l'altezza della finestra e applicarla all'elemento in questione. Evita il salto perché ora hai un'altezza statica sul tuo div.

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

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

Ho creato una soluzione javascript alla vaniglia per l'utilizzo di unità VH. L'uso di VH praticamente ovunque è influenzato dalle barre degli indirizzi che riducono al minimo lo scorrimento. Per correggere il jank che mostra quando la pagina viene ridisegnata, ho qui queste j che cattureranno tutti i tuoi elementi usando le unità VH (se dai loro la classe .vh-fix) e daranno loro altezze di pixel incorporate. Essenzialmente congelandoli all'altezza che vogliamo. Puoi farlo sulla rotazione o sulla modifica della dimensione della finestra per rimanere reattivo.

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

Questo ha risolto tutti i miei casi d'uso, spero che sia d'aiuto.

questa è la mia soluzione per risolvere questo problema, ho aggiunto commenti direttamente sul codice. Ho testato questa soluzione e funziona benissimo. Spero che saremo utili per tutti ha lo stesso problema.

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

Questa è la soluzione migliore (più semplice) sopra ogni cosa che ho provato.

... E questo non mantiene l'esperienza nativa della barra degli indirizzi !

Ad esempio, è possibile impostare l'altezza con CSS al 100%, quindi impostare l'altezza a 0,9 * dell'altezza della finestra in px con javascript, quando il documento viene caricato.

Ad esempio con jQuery:

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

)

Sfortunatamente non c'è nulla che funzioni con CSS puro: P, ma devi anche essere minuscolo vhe vwdifettoso su iPhone: usa le percentuali.

Ho impostato il mio elemento larghezza, con javascript. Dopo aver impostato il 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");

Questo funziona per me. Non uso jquery ect. perché voglio che si carichi appena possibile.

Ci sono volute alcune ore per capire tutti i dettagli di questo problema e capire la migliore implementazione. A partire da aprile 2016 solo iOS Chrome ha questo problema. Ho provato su Android Chrome e iOS Safari: entrambi andavano bene senza questa correzione. Quindi la correzione per iOS Chrome che sto usando è:

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

Risposta semplice se lo sfondo lo consente, perché non impostare la dimensione dello sfondo: a qualcosa che copre solo la larghezza del dispositivo con le query multimediali e utilizzare accanto alla posizione: after: fixed; hack qui .

IE: dimensioni dello sfondo: 901 px; per eventuali schermi <900px? Non perfetto o reattivo, ma ha funzionato un incanto per me sul cellulare <480px poiché sto usando un BG astratto.

Sto usando questa soluzione alternativa: correggi l'altezza di bg1 al caricamento della pagina di:

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

Quindi collegare un listener di eventi di ridimensionamento a Window che fa questo: se la differenza di altezza dopo il ridimensionamento è inferiore a 60px (qualcosa di più dell'altezza della barra dell'URL), allora non fare nulla e se è maggiore di 60px, impostare nuovamente l'altezza di bg1 all'altezza dei suoi genitori! codice completo:

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: Questo bug è così irritante!

Simile alla risposta @AlexKempton. (non posso commentare scusa)

Ho usato lunghi ritardi di transizione per impedire il ridimensionamento dell'elemento.

per esempio:

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

Il compromesso con questo è che impedisce il ridimensionamento dell'elemento incluso sulla rotazione del dispositivo, tuttavia, è possibile utilizzare alcuni JS per rilevare orientationchangee ripristinare l'altezza se questo fosse un problema.

Per coloro che desiderano ascoltare l'altezza interna effettiva e lo scorrimento verticale della finestra mentre il browser per dispositivi mobili Chrome sta passando la barra dell'URL da mostrata a nascosta e viceversa, l'unica soluzione che ho trovato è impostare una funzione intervallo e misurare la discrepanza del window.innerHeightcon il suo valore precedente.

Questo introduce questo codice:

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

Spero che questo sia utile. Qualcuno conosce una soluzione migliore?

La soluzione che mi è venuta in mente quando ho avuto un problema simile è stata quella di impostare l'altezza dell'elemento window.innerHeightogni volta touchmoveche veniva generato l'evento.

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

Questo fa sì che l'elemento copra esattamente il 100% dello schermo disponibile in ogni momento, né più né meno. Anche durante nascondere o mostrare la barra degli indirizzi.

Tuttavia è un peccato che dobbiamo inventare quel tipo di patch, dove semplice position: fixeddovrebbe funzionare.

Con il supporto delle proprietà personalizzate CSS (variabili) in iOS, puoi impostarle con JS e usarle solo su 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);
        }
    }
}

La mia risposta è per tutti coloro che vengono qui (come ho fatto io) a trovare una risposta per un bug causato dall'indirizzo nascosto / interfaccia browser.

La barra degli indirizzi nascosta provoca l'attivazione dell'evento di ridimensionamento. Ma diverso da altri eventi di ridimensionamento, come passare alla modalità orizzontale, questo non cambia la larghezza della finestra. Quindi la mia soluzione è agganciare l'evento di ridimensionamento e verificare se la larghezza è la stessa.

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