La imagen de fondo salta cuando la barra de direcciones oculta iOS / Android / Mobile Chrome

Actualmente estoy desarrollando un sitio receptivo usando Twitter Bootstrap.

El sitio tiene una imagen de fondo de pantalla completa en dispositivos móviles / tabletas / computadoras de escritorio. Estas imágenes rotan y se desvanecen a través de cada una, usando dos divs.

Es casi perfecto, excepto un problema. Al usar iOS Safari, el navegador de Android o Chrome en Android, el fondo salta ligeramente cuando un usuario se desplaza hacia abajo en la página y hace que la barra de direcciones se oculte.

El sitio está aquí: http://lt2.daveclarke.me/

Visítelo en un dispositivo móvil y desplácese hacia abajo y debería ver que la imagen cambia de tamaño / se mueve.

El código que estoy usando para el DIV de fondo es el siguiente:

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

Todas las sugerencias son bienvenidas, ¡esto ha estado haciendo mi cabeza por un tiempo!

Este problema se debe a que las barras de URL se reducen / se deslizan y cambian el tamaño de los divs # bg1 y # bg2, ya que tienen un 100% de altura y están "fijos". Dado que la imagen de fondo está configurada para "cubrir", ajustará el tamaño / posición de la imagen a medida que el área que contiene es más grande.

Según la naturaleza receptiva del sitio, el fondo debe escalar. Considero dos posibles soluciones:

1) Establezca la altura # bg1, # bg2 a 100vh. En teoría, esta es una solución elegante. Sin embargo, iOS tiene un error vh ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Intenté usar una altura máxima para evitar el problema, pero se mantuvo.

2) El tamaño de la ventana gráfica, cuando lo determina Javascript, no se ve afectado por la barra de URL. Por lo tanto, Javascript se puede usar para establecer una altura estática en # bg1 y # bg2 en función del tamaño de la ventana gráfica. Esta no es la mejor solución, ya que no es CSS puro y hay un ligero salto de imagen en la carga de la página. Sin embargo, es la única solución viable que veo teniendo en cuenta los errores "vh" de iOS (que no parecen estar solucionados en iOS 7).

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

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

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

En una nota al margen, he visto muchos problemas con estas barras de URL de cambio de tamaño en iOS y Android. Entiendo el propósito, pero realmente necesitan pensar en la extraña funcionalidad y el caos que traen a los sitios web. El último cambio es que ya no puede "ocultar" la barra de URL en la carga de la página en iOS o Chrome con trucos de desplazamiento.

EDITAR: Si bien el script anterior funciona perfectamente para evitar que el fondo cambie de tamaño, causa un vacío notable cuando los usuarios se desplazan hacia abajo. Esto se debe a que mantiene el tamaño del fondo al 100% de la altura de la pantalla menos la barra de URL. Si agregamos 60 px a la altura, como sugiere suizo, este problema desaparece. Significa que no podemos ver los 60 píxeles inferiores de la imagen de fondo cuando la barra de URL está presente, pero evita que los usuarios vean un vacío.

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

Descubrí que la respuesta de Jason no estaba funcionando para mí y que todavía estaba dando un salto. El Javascript garantizaba que no hubiera ningún espacio en la parte superior de la página, pero el fondo seguía saltando cada vez que la barra de direcciones desaparecía / reaparecía. Entonces, además de la corrección de Javascript, apliqué transition: height 999999sal div. Esto crea una transición con una duración tan larga que prácticamente congela el elemento.

Tengo un problema similar en un encabezado de nuestro sitio web.

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

Esto terminará en una experiencia de desplazamiento irregular en Android Chrome, porque .header-container volverá a escalar después de que la barra de direcciones se oculte y se quite el dedo de la pantalla.

Solución CSS:

Si agrega las dos líneas siguientes, evitará que la barra de direcciones se oculte y que aún sea posible el desplazamiento vertical:

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

El problema se puede resolver con una consulta de medios y algunas matemáticas. Aquí hay una solución para una orientación de retrato:

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

Dado que vh cambiará cuando la barra de URL desaparezca, debe determinar la altura de otra manera. Afortunadamente, el ancho de la ventana gráfica es constante y los dispositivos móviles solo tienen algunas relaciones de aspecto diferentes; si puede determinar el ancho y la relación de aspecto, un poco de matemática le dará la altura de la ventana gráfica exactamente como debería funcionar. Aquí está el proceso.

1) Cree una serie de consultas de medios para las relaciones de aspecto que desea orientar.

• use la relación de aspecto del dispositivo en lugar de la relación de aspecto porque este último cambiará de tamaño cuando la barra de URL desaparezca

• Agregué 'max' a la relación de aspecto del dispositivo para apuntar a cualquier relación de aspecto que suceda entre las más populares. No serán tan precisos, pero serán solo para una minoría de usuarios y seguirán siendo bastante cercanos al vh adecuado.

• recuerde la consulta de medios usando horizontal / vertical, por lo que para portait necesitará voltear los números

2) para cada consulta de medios, multiplique el porcentaje de altura vertical que desee que tenga el elemento en vw por el reverso de la relación de aspecto.

• Como conoce el ancho y la relación de ancho a alto, simplemente multiplique el% que desea (100% en su caso) por la relación de alto / ancho.

3) Tienes que determinar la altura de la barra de URL, y luego menos eso desde la altura. No he encontrado medidas exactas, pero uso el 9% para dispositivos móviles en paisajes y eso parece funcionar bastante bien.

Esta no es una solución muy elegante, pero las otras opciones tampoco son muy buenas, considerando que son:

• Que su sitio web parezca defectuoso para el usuario,

• tener elementos de tamaño incorrecto, o

• Usando javascript para algunos estilos básicos ,

El inconveniente es que algunos dispositivos pueden tener diferentes alturas de barra de URL o relaciones de aspecto que los más populares. Sin embargo, usar este método si solo un pequeño número de dispositivos sufre la suma / resta de unos pocos píxeles, eso me parece mucho mejor que todos los que tienen un tamaño de sitio web al deslizar.

Para hacerlo más fácil, también creé un mix de 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%);
  }
}

Todas las respuestas aquí están usando la windowaltura, que se ve afectada por la barra de URL. ¿Se han olvidado todos de la screenaltura?

Aquí está mi solución 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);
  }
});

Agregar la .css()parte está cambiando el elemento de posición absoluta inevitablemente alineado por arriba a alineado por abajo, por lo que no hay ningún salto en absoluto. Aunque, supongo que no hay razón para no agregarlo directamente al CSS normal.

Necesitamos el sniffer de agente de usuario porque la altura de la pantalla en los escritorios no sería útil.

Además, todo esto supone #background es un elemento de posición fija que llena la ventana.

Para los puristas de JavaScript (advertencia - no probado):

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

EDITAR: Lamento que esto no responda directamente a su problema específico con más de un fondo. Pero este es uno de los primeros resultados cuando se busca este problema de fondos fijos saltando en dispositivos móviles.

También me encontré con este problema cuando intentaba crear una pantalla de entrada que cubriera toda la ventana gráfica. Lamentablemente, la respuesta aceptada ya no funciona.

1) Elementos con la altura configurada para 100vhcambiar su tamaño cada vez que cambia el tamaño de la ventana gráfica, incluidos aquellos casos en los que es causada por (des) aparecer la barra de URL.

2) $(window).height()devuelve valores también afectados por el tamaño de la barra de URL.

Una solución es "congelar" el elemento utilizando transition: height 999999scomo se sugiere en la respuesta de AlexKempton . La desventaja es que esto deshabilita efectivamente la adaptación a todos los cambios de tamaño de la vista, incluidos los causados ​​por la rotación de la pantalla.

Entonces, mi solución es administrar los cambios de la vista manualmente usando JavaScript. Eso me permite ignorar los pequeños cambios que probablemente sean causados ​​por la barra de URL y reaccionar solo en los grandes.

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

EDITAR: en realidad uso esta técnica junto con height: 100vh. La página se representa correctamente desde el principio y luego se activa JavaScript y comienza a administrar la altura manualmente. De esta manera, no hay parpadeo alguno mientras se carga la página (o incluso después).

La solución actualmente estoy usando es comprobar el userAgentsobre $(document).readypara ver si se trata de uno de los navegadores ofensivos. Si es así, siga estos pasos:

1. Establezca las alturas relevantes a la altura de la ventana gráfica actual en lugar de '100%'
2. Almacenar el valor horizontal de la vista actual
3. Luego, en $(window).resize, solo actualice los valores de altura relevantes si la nueva dimensión de la vista horizontal es diferente de su valor inicial
4. Almacene los nuevos valores horizontales y verticales

Opcionalmente, también puede probar si permite cambiar el tamaño vertical solo cuando están más allá de la altura de la (s) barra (s) de direcciones.

Ah, y la barra de direcciones sí afecta $(window).height. Consulte: La barra de direcciones del navegador Mobile Webkit (Chrome) cambia $ (ventana) .height (); haciendo tamaño de fondo: ¿reescalar la cubierta cada vez que JS "Ventana" ancho-alto frente a "pantalla" ancho-alto?

Encontré una solución realmente fácil sin el uso de Javascript:

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

Todo lo que hace es retrasar el movimiento para que sea increíblemente lento y no se note.

Mi solución implicó un poco de javascript. Mantenga el 100% o 100vh en el div (esto evitará que el div no aparezca en la carga de la página inicial). Luego, cuando se carga la página, tome la altura de la ventana y aplíquela al elemento en cuestión. Evita el salto porque ahora tienes una altura estática en tu div.

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

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

Creé una solución javascript de vainilla para usar unidades VH. El uso de VH prácticamente en cualquier lugar se realiza mediante barras de direcciones que minimizan el desplazamiento. Para arreglar el jank que se muestra cuando la página se vuelve a dibujar, tengo este js aquí que tomará todos sus elementos usando unidades VH (si les da la clase .vh-fix) y les dará alturas de píxeles en línea. Esencialmente congelarlos a la altura que queremos. Puede hacer esto en rotación o en el cambio de tamaño de la vista para mantenerse receptivo.

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

Esto ha resuelto todos mis casos de uso, espero que ayude.

Esta es mi solución para resolver este problema, he agregado comentarios directamente en el código. He probado esta solución y funciona bien. Espero que seamos útiles para que todos tengan el mismo 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
  }); 
};

Esta es la mejor solución (la más simple) por encima de todo lo que he probado.

... ¡Y esto no mantiene la experiencia nativa de la barra de direcciones !

Puede establecer la altura con CSS al 100%, por ejemplo, y luego establecer la altura a 0.9 * de la altura de la ventana en px con javascript, cuando se carga el documento.

Por ejemplo con jQuery:

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

)

Desafortunadamente, no hay nada que funcione con CSS: P puro, pero también tenga cuidado vhy tenga vwerrores en los iPhones: use porcentajes.

Configuré mi elemento de ancho, con javascript. Después configuré el 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");

Esto funciona para mi. No uso jquery ect. porque quiero que se cargue lo antes posible.

Tomó algunas horas comprender todos los detalles de este problema y descubrir la mejor implementación. Resulta que a partir de abril de 2016 solo iOS Chrome tiene este problema. Probé en Android Chrome y iOS Safari, ambos estaban bien sin esta solución. Entonces, la solución para iOS Chrome que estoy usando es:

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

Respuesta simple si su fondo lo permite, ¿por qué no establece el tamaño del fondo: en algo que solo cubra el ancho del dispositivo con consultas de medios y use junto con: después de la posición: fijo; piratear aquí .

IE: tamaño de fondo: 901px; para cualquier pantalla <900px? No es perfecto ni receptivo, pero funcionó a las mil maravillas en dispositivos móviles de <480 píxeles, ya que estoy usando un BG abstracto.

Estoy usando esta solución: corrija la altura de bg1 en la carga de la página:

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

Luego, adjunte un detector de eventos de cambio de tamaño a Window que haga esto: si la diferencia de altura después del cambio de tamaño es inferior a 60 píxeles (algo más que la altura de la barra de URL), no haga nada y, si es mayor de 60 píxeles, ¡vuelva a establecer la altura de bg1 a la altura de sus padres! código 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;
    }
}

PD: ¡Este error es muy irritante!

Similar a la respuesta de @AlexKempton. (no puedo comentar lo siento)

He estado usando largos retrasos de transición para evitar que el elemento cambie de tamaño.

p.ej:

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

La desventaja con esto es que evita el cambio de tamaño del elemento, incluso en la rotación del dispositivo, sin embargo, podría usar algunos JS para detectar orientationchangey restablecer la altura si esto fuera un problema.

Para aquellos que deseen escuchar la altura interna real y el desplazamiento vertical de la ventana mientras el navegador móvil Chrome hace la transición de la barra de URL de mostrada a oculta y viceversa, la única solución que encontré es establecer una función de intervalo, y Mida la discrepancia de la window.innerHeightcon su valor anterior.

Esto introduce este código:

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

Espero que esto sea útil. ¿Alguien sabe una mejor solución?

La solución que se me ocurrió cuando tuve un problema similar fue establecer la altura del elemento window.innerHeightcada vez touchmoveque se disparaba un 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);
    }
});

Esto hace que el elemento abarque exactamente el 100% de la pantalla disponible en todo momento, ni más ni menos. Incluso durante la barra de direcciones oculta o muestra.

Sin embargo, es una pena que tengamos que crear ese tipo de parches, donde lo simple position: fixeddebería funcionar.

Con el soporte de las propiedades personalizadas de CSS (variables) en iOS, puede configurarlas con JS y usarlas solo en 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);
        }
    }
}

Mi respuesta es que todos los que vienen aquí (como lo hice yo) encuentren una respuesta para un error causado por la interfaz oculta / interfaz del navegador.

La barra de direcciones oculta hace que se active el evento resize. Pero a diferencia de otros eventos de cambio de tamaño, como cambiar al modo horizontal, esto no cambia el ancho de la ventana. Entonces, mi solución es conectar con el evento de cambio de tamaño y verificar si el ancho es el mismo.

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