Weiße Fläche auf festen hintergrund beim scrollen auf ios

Mein Ziel ist es, eine abgespeckte hintergrund, die auf iOS/Android, die nicht zu skalieren, wenn der Benutzer scrollt (und die Adressleiste verschwindet). Ich habe mehrere Fragen, mit nützlichen Antworten, aber irgendwie habe ich immer ärgerlich-Verhalten auf meinem iPhone. Ich benutze Bootstrap.

Hier ist meine vereinfachte HTML -

<html>
<body>
   <div id="background-img"></div>
   <div id="layout" class="container">
   <div id="content-main" class="col-xs-12">
      <p>Some text here</p>
   </div>
</div>
</body>
</html>

Hier ist meine css -

html {
  height: 100%; }

body {
  position: relative;
  /* required for scrollspy */
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 30px;
  font-weight: normal;
  height: 100%;
  color: white;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* smooth scrolling on ios */ }

#background-img {
  width: 100%;
  top: 0;
  left: 0;
  bottom: -80px;
  position: fixed;
  z-index: -1;
  background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center;
  background-size: cover;
}
#content-main { //nothing fancy }

Läuft alles einwandfrei auf dem desktop. Aber wenn ich die Website öffnen und auf ios (chrome oder safari - das macht keinen Unterschied) bekomme ich einen weißen Balken unten auf dem Bildschirm, wenn ich nach unten scrollen. Die bar verschwindet beim scrollen aufgehört hat. Sie können es selbst ausprobieren auf dem Handy an: https://jsbin.com/rudetokoxu

Ich habe versucht, Lösungen hier gepostet:
CSS hintergrund Strecken zu füllen Höhe in iOS, aber es gibt einen weißen Rand auf Blättern. Lösung scheint hier logisch. Ich habe sogar versucht, die Einstellung der Höhe des hintergrund-div auf 200%, aber ohne Erfolg.

Habe auch versucht:
mobile IOS Google chrome Adressleiste Verhalten
und hier:
Hintergrund Bild springt, wenn die Adressleiste blendet iOS - /Android - /Mobile-Chrome
einschließlich der js-Lösungen (es schien, dass einige von Ihnen nicht mehr funktionieren, also ich nicht versuchen Sie alle js-Lösungen) und alles, was ich finden konnte über das Thema

Bitte helfen Sie mir dieses Problem lösen oder überzeugen Sie mich nie zweimal darüber nachdenken, nervige kleine Dinge wie diese (cos Leben ist voll von Ihnen 🙂 )

BTW: diese Seite hat das gleiche problem auf mobile: http://www.laregiondesmusees.fr, aber diese Seite nicht leiden: http://www.heartkids.co.nz

InformationsquelleAutor jzp74 | 2015-09-05
  1. 16

    Ich fühle deinen Schmerz. Wenn man sich sorgfältig auf das Beispiel, das Sie gefunden, wo es kein white-space-problem (http://www.heartkids.co.nz) - die Antwort war da, aber schwer zu finden, es sei denn, Sie wissen, was Sie suchen.

    Sehen Sie, dass Sie angewendet eine 2d-Transformation auf dem hintergrund-Bild. In den meisten Fällen ist die Anwendung entweder eine 2d-oder eine 3d-Transformation auf fixierten divs mit background-images entledigt sich der unerwünschten weißen Raum wie diesem.

    Diese CSS entfernen, dass lästige weiße Balken. Cheers.

    .background-img {
   transform: translate3d(0,0,0);  
}
    • Bisschen späte Antwort, aber danke! Es scheint, dass das Verhalten sah ich in Chrome und Safari auf ios existiert nicht mehr in Chrome. Ich kann immer noch reproduzieren in Safari aber Ihre Anregung in Kombination mit einigen der anderen Tipps, die ich in meinem ursprünglichen Beitrag erwähnt, das problem zu beheben.
    • Vielen Dank für diese Antwort. So viel besser als die 1000 von js-hacks gibt. Prost!
    InformationsquelleAutor user3621874
Schreibe einen Kommentar