CSS hintergrund Strecken zu füllen Höhe in iOS, aber es gibt einen weißen Rand auf Blättern

diese CSS wird mein hintergrund zu füllen, die 100% der Bildschirmhöhe in iOS, aber es gibt ein kleines problem - wenn Sie nach unten scrollen dort ist zunächst ein Leerzeichen ist, dann, wenn Sie heben Sie Ihren finger an und stoppen Sie die hintergrund-Bild "passt" und füllt auf 100% der Bildschirmhöhe wieder. Das problem ist nicht neu-auf der gleichen Seite auftreten, wenn Sie weiter Blättern, nur die erste Zeit. Könnte mir bitte jemand helfen? Dank

#background {
  background: url(../img/background.jpg) center repeat-x;
  position: fixed;
  background-size: auto 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1
}
  • iOS ist nicht so toll mit position: fixed. außerdem, warum brauchst du position:fixed zu beginnen? warum nicht den hintergrund <body>?
  • Ich habe eine 50x1000 px hintergrund Bild Muster, das ich versuche zu bekommen, füllen Sie alle Bildschirme (iOS und desktops) 100% Breite und 100% Höhe, das ist mein roh-Lösung zu füllen iOS 100% Höhe
  • Hast meine Lösung nicht lösen Ihr problem?
  • Ihre Lösung füllt auf 100% der Seite, die nicht 100% auf dem Bildschirm auf iOS
  • Es wäre toll, wenn könnten Sie reproduzieren Sie Ihr Problem in Jsfiddle oder andere oder link zu Ihrer website, weil das problem nicht aus der #background CSS selbst.
  • Ich hatte vor kurzem dieses problem und wir am Ende brauchen, um ein befliesbarer hintergrund Bild und geben bis auf position:fixed. In iOS der Fenster, die Höhe schrumpft für das untere Menü-Leiste, dann erweitert, wenn Sie scrollen und der browser nicht aktualisiert, der hintergrund schnell genug. Wir haben auch diesen Ansatz aufgegeben, weil die Feste in voller Höhe, hintergrund-div produzierte Inhalte flackern und re-rendering in Android native und Firefox beim scrollen.
  • das ist genau mein problem, Sie geben eine codierte Lösung? Welchen Ansatz haben Sie am Ende mit?
  • Wir haben nicht mit einem festen hintergrund, landeten wir das hinzufügen eines hintergrund-der content-wrapper, der Bildlauf mit dem Inhalt. Die iOS-und Android-Probleme, mit Schienen, die auf dem Weg zu den mobile-Browsern Griff position:fixed. Aka: nicht gut. Nur für die iOS-Ausgabe, die Sie könnten versuchen, Einstellung #background { height: 150% }, aber soweit ich mich erinnere hatten wir noch die weiße Leiste. Sorry. 🙁
  • ok, Höhe 150% hat bei mir nicht funktioniert, ive Schloss seine mobile safari Malerarbeiten Frage, wie dies stackoverflow.com/questions/3485365/..., wäre es eine javascript-Lösung? zu Kraft-webkit-repaint der div vor ich lasse meine finger? das ist wirklich das problem, alles ok, nachdem Sie den finger auf Blättern, nur nicht vor
  • Das Problem in diesem post beschrieben : stackoverflow.com/questions/22716660/... scheint das zu reflektieren, was Sie beschreiben. Vielleicht kann es helfen.
  • versuchen Sie diesen link an, vielleicht können Sie die Lösung bekommen Sie hier.. stackoverflow.com/questions/10629403/...

InformationsquelleAutor user852974 | 2014-03-30
  1. 13

    Dies geschieht, weil Ihre #background element festgelegt ist, zu "Folgen" die Höhe der Fenster:

    #background {
    ...
    position: fixed;
    top: 0;
    bottom: 0;
    ...
}

    Aber, die window im Safari ändert seine Größe, wenn Sie nach unten scrollen die Inhalte für die erste Zeit von 460px zu 529px:

    CSS hintergrund Strecken zu füllen Höhe in iOS, aber es gibt einen weißen Rand auf Blättern
    CSS hintergrund Strecken zu füllen Höhe in iOS, aber es gibt einen weißen Rand auf Blättern
    CSS hintergrund Strecken zu füllen Höhe in iOS, aber es gibt einen weißen Rand auf Blättern

    Wie Sie sehen können von diesen screenshots, wenn die web-Seite geladen wird, die window.innerHeight gleich 460px (auf iPhone5). Dann, wenn Sie beginnen, scrollen Sie die Seite nach unten, während Ihr finger den Bildschirm berührt der window.innerHeight erhöht wird, um 529px aber der Inhalt ist noch nicht aktualisiert. Nur, wenn der finger losgelassen wird der Bildschirm von der #background element wird aktualisiert, mit der neuen Fenster-Höhe, die gleich zu 529px.

    Um dieses Problem zu beheben, sollten Sie sicherstellen, dass die #background element höher ist als die des ersten Fensters Höhe von 529-460 = 69px. Oder die #background element Konstanten Höhe von 529px (oder höher):

    #background {
    ...
    position: fixed;
    top: 0;
    bottom: -69px;
    ...
}

    ODER

    #background {
    ...
    position: fixed;
    top: 0;
    /* use height instead of bottom */
    height: 529px;
    ...
}

    Hier ist die End-code, der behebt dieses Problem:

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fixed background</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/styles.css?v=1.0">
        <style>
            #background {
                background: url(bkgd.png) repeat;
                position: fixed;
                background-size: 100% auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: -69px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="background"></div>
        <div style="height: 5000px;"></div>
    </body>
</html>
    • vielen Dank, das gelöst es perfekt!
    InformationsquelleAutor smnh
  2. 1

    Habe ich nur dieses Problem gelöst. Das problem für mich war, dass der Leerraum wurde, stellte ich meinen body-tag mit background-image mit background-size einstellen zu decken. Um dieses Problem zu beheben ich:

    background-size: 100vw 100vh;

    Dann legen Sie die Medien-Abfrage, die ich hatte das problem mit zu

    {background-size: cover;}
    InformationsquelleAutor Leafyshark
  3. 0

    Warum nicht mit background-size: cover. So hintergrund Bild immer füllen Ihre angeschlossenen div oder body-tag

    • Nope... das ist die offensichtliche Antwort, aber es funktioniert nicht auf iOS.
    InformationsquelleAutor fu8ar
  4. 0

    <name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />

    body{
    background-size: cover;

    }

    InformationsquelleAutor
  5. 0

    Versuchen, die Verwendung von viewport-Einheiten auf dem hintergrund

    background-size: 100vw 100vh;

    Aber erste add-viewport-meta-tag auf Ihrer Seite:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    HINWEIS:

    Vw und vh-Einheiten werden nicht vollständig unterstützt, überprüfen Sie heraus die unterstützten Browser hier.

    • viewport-units werden nicht vollständig unterstützt: caniuse.com/viewport-units
    • funktioniert nicht beim scrollen
    • "vh" hat sehr unerwartetes Verhalten in iOS (und bald Android) vor allem zwischen Safari und Chrome, obwohl Sie mit dem gleichen renderer der UI-toolbar-Elemente, die bewegen-scrollen ist, was das Problem verursacht. Sie können mehr darüber Lesen Sie hier - nicolas-hoizey.com/2015/02/...
    InformationsquelleAutor Karim AG
  6. 0

    Können Sie dieses Problem beheben, indem Sie mit langen übergang Verzögerungen zu verhindern, dass das element vergrößern.

    zB: 

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

    Den Nachteil mit diesem ist, dass es verhindert, dass eine Größenänderung des Elements einschließlich auf dem Gerät drehen, aber Sie könnte etwas JS zu erkennen orientationchange, und setzen Sie die Höhe, wenn dies ein Thema war.

    InformationsquelleAutor Chris Anderson
  7. -1
    html, body {
    display: block;
    height:  100%;
    width:   100%;
}

body {
    background-image:      url('some/image.jpg');
    background-repeat:     repeat-x;
    background-attachment: fixed;
    background-position:   center center;
    background-size:       contain;
}

    jsfiddle

    InformationsquelleAutor jacob
Schreibe einen Kommentar