quitar - ocultar link html

Impedir una imagen de fondo de posición fija: la cubierta se redimensiona en los navegadores móviles al ocultar la barra de direcciones

Question

Lo siento por la falta de ejemplo en este caso, pero creo que es bastante fácil de entender.

Tengo un fondo fijo en mi sitio, que actualmente se implementa así:

#background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #28305e;
    background-image: url(../images/background.jpg);
    background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    z-index: -10;
}

<div id="background"></div>

Esto es excelente en todos los navegadores hasta ahora, excepto en los navegadores móviles donde ocultan la barra de direcciones al desplazarse hacia abajo. Cuando la barra de direcciones está oculta, la ventana gráfica se expande verticalmente y la imagen de fondo cambia su tamaño de forma jaspeada. En este sitio en particular, será común que los usuarios se desplacen hacia arriba y hacia abajo, y el efecto distrae.

¿Alguna idea o estrategia para solucionar esto o implementar el fondo de una manera diferente?

Podría envolver todo en un contenedor fijo y configurar el desbordamiento para que se desplace, lo que evita que la barra de direcciones se oculte, pero prefiero no hacerlo (Google Glass no puede desplazarse por esos contenedores, jaja ... Me gustaría hacer una demostración allí también).

He estado tratando de pensar en algo que proporcione una imagen de fondo: cubra la funcionalidad con algún tipo de búfer, de modo que se muestre más grande que la ventana gráfica, y no vuelva a renderizarse a menos que la ventana gráfica se expanda más allá de esa memoria intermedia, pero yo No estoy seguro de cómo implementar eso.

EDIT : Realmente implementé esto y detallé el proceso en una respuesta a continuación. Sin embargo, incluso con esta configuración de búfer (que extiende la altura de la imagen de fondo a más de 60 píxeles más que la altura de la ventana gráfica), al ocultarse la barra de direcciones, todavía muestra un segmento de color de fondo en blanco que se revela, y una vez que Detener el desplazamiento, muestra el resto de la imagen de fondo.

Sigo buscando una manera de mantener la función de ocultación de la barra de direcciones nativa (que ahora se ha expandido a iOS Safari en iPad en iOS 8) y también tiene una imagen de fondo de pantalla completa que siempre se representa completamente, incluso si la ventana gráfica cambia de altura al ocultar la dirección. bar. Empezando a preguntarme si debería estar archivando informes de errores para todos los navegadores ...

Answer 1

Es difícil decirlo sin un ejemplo, pero puede que te falte el width:100% debería detener cualquier cambio de tamaño con la barra de desplazamiento.

Otra forma de implementar un fondo fijo en el móvil es tener un div de fondo con position: absolute y overflow: hidden y todas sus otras implementaciones de fondo, luego tener un div de contenido con overflow-y:scroll; y establezca la altura del div de contenido utilizando jquery o cualquier otro método que elija para obtener la altura de la ventana con.

Echa un vistazo a este JS Fiddle para ver un ejemplo.

Answer 2

Para aquellos que aún buscan una respuesta, puede usar los nuevos atributos vw y vh con un elemento que es position: fixed .

Esto se desplaza mientras la barra de direcciones se mueve / reduce / etc, luego permanece fija en la página.

#bgimg {
  display: block;
  background: no-repeat url(bg.png);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 120vh;
}

Answer 3

Para el safari móvil, debe, de manera no intencionada, adjuntar fondos fijos al elemento html como tal.

html {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

A continuación, establezca el desplazamiento al cuerpo.

body {
    height: 100%;
    overflow: scroll;
}

Seguirá necesitando el div de fondo para IE 8 ya que no es compatible con la propiedad de tamaño de fondo, por lo que los navegadores móviles deben ocultarlo. La forma más limpia de hacerlo es explotar la incapacidad de IE 8 para leer una consulta de medios

@media only screen { #background { display: none; }}

Answer 4

Terminé creando una solución para el móvil. Puede que no se degrade con gracia, pero está funcionando bien por el momento.

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb/d+|meego).+mobile|android|ipad|playbook|silk|avantgo|bada//|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)//|plucker|pocket|psp|series(4|6)0|symbian|treo|up/.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s/-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|/-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw/-(n|u)|c55//|capi|ccwa|cdm/-|cell|chtm|cldc|cmd/-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc/-s|devi|dica|dmob|do(c|p)o|ds(12|/-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(/-|_)|g1 u|g560|gene|gf/-5|g/-mo|go(/.w|od)|gr(ad|un)|haie|hcit|hd/-(m|p|t)|hei/-|hi(pt|ta)|hp( i|ip)|hs/-c|ht(c(/-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i/-(20|go|ma)|i230|iac( |/-|//)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |//)|klon|kpt |kwc/-|kyo(c|k)|le(no|xi)|lg( g|//(k|l|u)|50|54|/-[a-w])|libw|lynx|m1/-w|m3ga|m50//|ma(te|ui|xo)|mc(01|21|ca)|m/-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(/-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)/-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|/-([1-8]|c))|phil|pire|pl(ay|uc)|pn/-2|po(ck|rt|se)|prox|psio|pt/-g|qa/-a|qc(07|12|21|32|60|/-[2-7]|i/-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55//|sa(ge|ma|mm|ms|ny|va)|sc(01|h/-|oo|p/-)|sdk//|se(c(/-|0|1)|47|mc|nd|ri)|sgh/-|shar|sie(/-|m)|sk/-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h/-|v/-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl/-|tdg/-|tel(i|m)|tim/-|t/-mo|to(pl|sh)|ts(70|m/-|m3|m5)|tx/-9|up(/.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|/-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(/-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas/-|your|zeto|zte/-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
 }

 if (window.mobilecheck() == true) {
  var newHeight = $(window).height() + 70;
  $("#background").css("height", newHeight);
 }

Encontré esa función mobilecheck en internet ( http://detectmobilebrowsers.com/ ). Si se vuelve verdadero, tomo mi contenedor de imagen de fondo fijo y agrego 70 a su altura. Luego, cuando arrastra la pantalla hacia arriba y la barra de direcciones del navegador web se oculta automáticamente (lo que aumenta la altura de la ventana), tiene suficiente altura adicional como para que el tamaño del fondo: la cubierta no tenga que cambiar el tamaño de la imagen de fondo para que se ajuste a la pantalla nuevamente .

Podría haber puesto toda la página en un contenedor fijo e impedir que las barras de direcciones móviles se oculten, pero no me gusta eludir una característica de los navegadores móviles que, de otro modo, sería interesante, y sé que iOS no está exactamente encantado con los contenedores fijos que tienen sus propias barras de desplazamiento (hay soluciones por supuesto, pero preferiría que mi contenido esté en un contenedor más estándar).

EDIT: Sin embargo, esta solución presenta este problema: CSS CHALLANGE: Imagen de fondo con 100% de altura: espacio en blanco cuando se desplaza por el móvil

Answer 5

Yo hice esto. Descubrí que si nunca realmente desplazas el cuerpo / la ventana, nunca activas la ocultación automática para Chrome. Así que envuelva el contenido en un div más grande y simplemente desplace eso y la ocultación automática nunca se activará. ¡¡¡PERO TAMBIÉN!!! El autohide nunca se dispara. (La barra de direcciones siempre está ahí). No dudaría en segundo lugar, podría ocultar la barra de direcciones después de esto, pero ¿cómo puede el usuario recuperar la barra de direcciones?

html, body {
  height: 100%; 
  overflow: hidden;
}
body {
  height: 100%;
}
#background {
  position: fixed;
  left: 50%;
  bottom: 0px;
  min-width: 100%;
  min-height: 120%;
  z-index: 0;
  background: url(''background.gif'');
  margin-left: -50%;
  background-position: center center;
  background-attachment: fixed;  
  background-size: cover;
}
#main_container {
  width: inherit;
  height: inherit;
  overflow-y: scroll;
}
.block {
  position: relative;
  text-align: center;
  background: transparent;
  height: 100%;
  z-index: 9;
}
.block {
  width: 100%;
  height: 100%;
  background: rgba(224, 224, 224, 0.4);
}
.block::before {
  content: '''';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}
.centered {
  display: inline-block;
  vertical-align: middle;
}

<div id="main_container">
  <div class="block" >
    <div class="centered">
      <h1 class="circle">Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block">  
    <div class="centered">
      <h1>Some text</h1>
    </div>
  </div>
  <div class="block" >
    <div class="centered">
      <h1>Some text</h1> 
    </div>
  </div>
</div>
<div id="bg"></div>