Feste Position des Hintergrundbildes verhindern: Größe des Covers in mobilen Browsern beim Ausblenden der Adressleiste nicht ändern

Entschuldigung für das Fehlen eines Beispiels in diesem Fall, aber ich denke, es ist leicht zu verstehen.

Ich habe einen festen Hintergrund auf meiner Seite, der derzeit so implementiert ist:

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

Dies ist bisher in allen Browsern großartig, mit Ausnahme von mobilen Browsern, bei denen die Adressleiste beim Herunterscrollen ausgeblendet wird. Wenn die Adressleiste ausgeblendet ist, wird das Ansichtsfenster vertikal erweitert und die Größe des Hintergrundbilds ändert sich irritierend. Auf dieser speziellen Site ist es üblich, dass Benutzer nach oben und unten scrollen, und der Effekt ist ablenkend.

Irgendwelche Ideen oder Strategien, um dies zu umgehen oder den Hintergrund auf andere Weise umzusetzen?

Ich könnte das Ganze in einen festen Container packen und das overflow-y auf scrollen setzen, was verhindert, dass die Adressleiste jemals ausgeblendet wird, aber ich würde es vorziehen, dies nicht zu tun (Google Glass kann nicht durch diese Container scrollen, haha… Möchte dort auch eine Demo machen).

Ich habe versucht, an etwas zu denken, das ein Hintergrundbild bietet: Cover-Funktionalität mit einer Art Puffer, so dass es größer als das Ansichtsfenster gerendert wird und nicht erneut gerendert wird, es sei denn, das Ansichtsfenster wird über diesen Puffer hinaus erweitert, aber ich bin mir nicht sicher wie ich das umsetzen soll.

BEARBEITEN: Ich habe dies tatsächlich implementiert und den Prozess in einer Antwort unten beschrieben. Aber selbst mit diesem Puffer-Setup (das die Höhe des Hintergrundbilds auf 60+ Pixel größer als die Höhe des Ansichtsfensters erweitert) wird beim Ausblenden der Adressleiste immer noch ein leeres Hintergrundfarbsegment angezeigt, das aufgedeckt wird, und sobald Sie Stoppen Sie das Scrollen, es rendert den Rest des Hintergrundbildes.

Suchen Sie immer noch nach einer Möglichkeit, die Funktion zum Ausblenden der nativen Adressleiste (die jetzt in iOS 8 auf iOS Safari auf dem iPad erweitert wurde) beizubehalten und auch ein Vollbild-Hintergrundbild zu haben, das immer vollständig gerendert wird, selbst wenn der Ansichtsbereich beim Ausblenden der Adresse die Höhe ändert Bar. Ich frage mich, ob ich einfach Fehlerberichte für alle Browser einreichen sollte …

Fast 5 Jahre später gibt es dafür endlich einen Fix, da Safari und jetzt Chrome für Android die vh-Einheiten geändert haben. Hör zu! https://developers.google.com/web/updates/2016/12/url-bar-resizing

Ich habe es auf dieser Website implementiert (kann dies auf keiner der Code-Spielplätze wirklich zeigen, da sie immer Ergebnisse in iframes einbetten): https://www.cochranesupply.com

Habe gerade den folgenden Code für ein Hintergrundelement verwendet:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../images/background.jpg);
    background-size: cover;
    z-index: -1;
}

Und das ist alles! Benötigen Sie nur Chrome für Android 56 oder Safari für iOS (nicht sicher, welche Version, aber dies ist möglicherweise schon lange in Safari).

Am Ende habe ich einen Workaround für Mobilgeräte erstellt. Es mag nicht anmutig abgebaut werden, aber es funktioniert vorerst gut.

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bbd+|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);
 }

Ich habe die mobilecheck-Funktion im Internet gefunden ( http://detectmobilebrowsers.com/ ). Wenn es true zurückgibt, nehme ich meinen festen Hintergrundbild-Container und addiere 70 zu seiner Höhe. Wenn Sie dann den Bildschirm nach oben ziehen und die Adressleiste des Webbrowsers automatisch ausgeblendet wird (wodurch die Fensterhöhe erhöht wird), hat sie genug zusätzliche Höhe, damit background-size: cover das Hintergrundbild nicht ruckartig skalieren muss, um es wieder an den Bildschirm anzupassen .

Ich hätte einfach die gesamte Seite in einen festen Container legen und verhindern können, dass sich mobile Adressleisten jemals verstecken, aber ich mag es nicht, ein ansonsten nettes Feature von mobilen Browsern zu umgehen, und ich weiß, dass iOS nicht gerade begeistert ist von festen Containern, die haben ihre eigenen Bildlaufleisten (es gibt natürlich Problemumgehungen, aber ich würde es vorziehen, wenn sich mein Inhalt in einem Standardcontainer befindet).

BEARBEITEN: Diese Problemumgehung führt jedoch zu diesem Problem: CSS-HERAUSFORDERUNG: Hintergrundbild mit 100% Höhe – Weißraum beim Scrollen auf dem Handy

Für mobile Safari müssen Sie dem HTML-Element unintuitiv feste Hintergründe anhängen.

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

Stellen Sie dann das Scrollen auf den Körper ein.

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

Sie benötigen weiterhin das background-div für IE 8, da es die background-size-Eigenschaft nicht unterstützt, sodass mobile Browser sie ausblenden sollten. Der sauberste Weg, dies zu tun, besteht darin, die Unfähigkeit von IE 8 auszunutzen, eine Medienabfrage zu lesen

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

Für diejenigen, die sich noch nach einer Antwort umschauen, können Sie das neue verwenden vw und vh Attribute mit einem Element, das ist position: fixed.

Dies scrollt, während sich die Adressleiste bewegt/schrumpft/usw. und bleibt dann auf der Seite fixiert.

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

Ohne ein Beispiel ist es schwer zu sagen, aber du wirst es vielleicht vermissen width:100% das sollte jede Größenänderung mit der Bildlaufleiste stoppen.

Eine andere Möglichkeit, einen festen Hintergrund auf dem Handy zu implementieren, ist ein Hintergrund-Div mit position: absolute und overflow: hidden und all Ihre anderen Hintergrundimplementierungen, dann haben Sie ein Inhalts-Div mit overflow-y:scroll; und legen Sie die Höhe des Inhalts-Divs mit jquery oder einer anderen Methode fest, mit der Sie die Fensterhöhe erhalten.

Schau dir das an JS Geige zum Beispiel.

Ich habe das gemacht. Ich habe festgestellt, dass Sie das automatische Ausblenden für Chrome nie auslösen, wenn Sie den Körper / das Fenster nie wirklich scrollen. Wickeln Sie den Inhalt also in ein größeres div ein und scrollen Sie einfach damit und das automatische Ausblenden wird nie ausgelöst. ABER AUCH!!! Das automatische Ausblenden wird nie ausgelöst. (Adressleiste ist immer da). Würden Sie keine Sekunde daran zweifeln, dass Sie die Adressleiste danach ausblenden können, aber wie bekommt der Benutzer dann die Adressleiste zurück?

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>