Position fixe arrière-plan sur iOS

J'ai un site web qui a un plein de l'image de fond fixe que le contenu "flotte" au-dessus. Il fonctionne très bien dans les navigateurs de bureau, mais l'arrière-plan fixe finit de défilement sur les iPads et autres tablettes. Cela semble être un problème commun, mais ensuite, j'ai couru à travers ce site, qui semble avoir un arrière-plan fixe, même sur iPad.

http://confitdemo.wordpress.com/

Aucune idée de comment ils sont tirer ce off? J'ai essayé:

#content-wrapper.posts-page {
background-attachment: fixed !important;
background-clip: border-box;
background-color: transparent;
background-image: url("image path");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}

(Ce qui a été copié à partir de Firebug, c'est pourquoi il n'est pas d'abréviation).

Mais pas eu de chance. Quelqu'un me pointé dans la bonne direction?

InformationsquelleAutor JeremyE | 2013-04-15
  1. 7

    Je pense que le problème réside dans le fait que votre table le plus probable redimensionne le fond, alors si vous ajoutez à cela les déclarations, en plus probable de la hotte, il doit obtenir l'exécution de l'amende juste.

    background-attachment: fixed !important;
background-size: cover !important;

    Edit:

    Si cela ne fonctionne pas seule autre raison pour laquelle je peux penser, c'est que ios doit en quelque sorte de redimensionner la taille du corps pour être aussi grand que le contenu, ce que vous avez à faire est de créer une div à l'intérieur de la balise body avec de bonnes propriétés

    #fixebg{
background: url(image.jpg) top;
height:100%;
width:100%;
position:fixed;
}

    Voici une semblable solution:

    Comment puis-je définir la position fixe de l'image de Fond en jquery mobile pour l'iPhone app à l'aide de Phonegap

    Edit - 2:

    Ajouté un violon, vous pouvez vérifier:

    http://jsfiddle.net/uZRXH/3/

    Et voici le lien de l'essayer sur votre ipad:

    http://fiddle.jshell.net/uZRXH/3/show

    • Désolé, je devrais avoir inclus le code complet. J'ai édité le post original pour inclure le code complet.
    • U pourrait m'envoyer un lien de votre site, parce que j'ai fait une démo et il fonctionne parfaitement bien pour moi.
    • a ajouté une démo lien vers le post original. Il fonctionne très bien régulières, les navigateurs, mais sur un iPad que sur l'arrière-plan défile.
    • Ajout d'un exemple de travail qui fonctionne sur mon iphone et ipad
    • PARFAIT. Fonctionne comme un charme. Merci une tonne.
    • J'ai essayé sur iOS mobile et n'a pas obtenu d'excellents résultats avec une image de fond fixe en ce qui concerne l'image, pas de mise à l'échelle (même avec l'arrière-plan: la couverture). Toutes les solutions pour cela?
    • Avez-vous lu ma réponse
    • Désolé, j'ai rédigé ce mal. J'ai essayé cette solution, et bien que j'ai eu de travail, puis j'ai eu des problèmes avec scrollTop. J'ai ensuite trouvé backstretch plugin jQuery qui ont travaillé. Merci pour l'aperçu que c'était le plus proche de la solution que j'ai pu trouver.
    • Voici un lien vers un violon avec une image d'arrière-plan, l'une à partir de la réponse a été supprimé: fiddle.jshell.net/uZRXH/140 Et aussi le seul à afficher sur l'ipad: fiddle.jshell.net/uZRXH/140/show

    InformationsquelleAutor Breezer
  2. 7

    Ce site web utilise un truc dans les navigateurs mobiles, en tirant parti du fait que, bien que background-attachment: fixed ne fonctionne pas, position: fixed fait, donc dans les navigateurs mobiles, il crée simplement un <div> qui reste fixe derrière le défilement de contenu.

    InformationsquelleAutor rev087
  3. 0

    ok, j'ai donc déjà à construire ce site, la partie avec un arrière-plan fixe serait se faire massacrer si je l'ai enveloppé dans un div pour donner div une position fixe. J'ai donc écrit ce et il fonctionne sur l'iPhone.

    J'ai un en-tête fixe, donc c'était facile à utiliser, mais quelque chose qui est toujours en haut de la fenêtre d'affichage va faire...

            if (//on mobile) {
            var headerH, headerH2, viewportH, sliderH, res
            viewportH = $(window).height(),
            headerH2 = 80 //correction when measuring with fixed header,
            $topheader = $('.top_header'),
            $slider = $('#twinslider') //the element to check for if in viewport;
            function getH() {
                headerH = $topheader.offset().top;
                sliderH = $slider.offset().top;
                res = (((headerH - headerH2) - sliderH) + viewportH) / viewportH;
                if (res > 0 && res < 1.4)  {
                    return res; //thats truthy and a value for further calculation
                } else {
                    return false;
                }
            }
            getH();

            setInterval(function(){ //before i listened to scroll, but this was better for performance
                if (getH()) {//if slider is in viewport
                    $slider.find('li').css({ //the element to set the background pos for
                        'background-position': 'center ' + res * 50 + '%'
                    }, 100);

                }                   
            }, 25); 

        }

    et puis donner de l'élément pour donner un arrière-plan fixe' une transition sur le background-position et vous avez terminé. Pas extraordinaire mais....et je me sens comme il y a une meilleure solution...mais cela fonctionne.

    InformationsquelleAutor Sjerp van Wouden
  4. 0

    1) z-index: -1; doit être ajouté à Breezer deuxième approche, si vous avez un lien des images sinon les images sont cachées (derrière l'arrière-plan)

    2) Sur la même approche, j'ai dû mettre la div avant le reste du contenu comme suit ou la page a été non-défilement si le contenu est ajouté à l'intérieur de la div tags:

    <body>
    <div id="fixedbg"></div>
    <!-- CONTENT HERE -->
    </body>

    InformationsquelleAutor Rafael