web-dev-qa-db-fra.com

Fond de position fixe sur iOS

J'ai un site Web qui a un fond d'image fixe que le contenu "flotte" ci-dessus. Cela fonctionne bien dans les navigateurs de bureau, mais l'arrière-plan fixe finit par défiler sur les iPad et autres tablettes. Cela semble être un problème courant, mais j'ai ensuite traversé ce site Web, qui semble avoir un arrière-plan fixe, même sur un iPad.

http://confitdemo.wordpress.com/

Des indices sur la façon dont ils réussissent? 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;
}

(Ceci a été copié à partir de Firebug, c'est pourquoi ce n'est pas un raccourci).

Mais pas eu de chance. Quelqu'un me fait-il pointer dans la bonne direction?

htmlcssipadmobilefixed
18
JeremyE

Je pense que le problème réside dans le fait que votre table redimensionne très probablement l’arrière-plan. Par conséquent, si vous ajoutez ces déclarations, il devrait très bien fonctionner correctement.

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

Modifier:

Si cela ne fonctionne pas, seule autre raison à laquelle je pense est que ios doit redimensionner la taille du corps pour être aussi grand que le contenu, vous devez alors créer une div à l'intérieur de la balise body avec les propriétés correctes

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

Voici une solution similaire:

Comment définir une position fixe Image d'arrière-plan dans l'application jquery mobile pour iPhone à l'aide de Phonegap

Edit - 2:

_ {Ajout d'un violon que vous pouvez vérifier)

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

_ {Et voici un lien pour l'essayer sur votre ipad:} _

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

7
Breezer

Ce site Web utilise une astuce dans les navigateurs mobiles, tirant parti du fait que si background-attachment: fixed ne fonctionne pas, position: fixed le fait, donc dans les navigateurs mobiles, il crée simplement un <div> qui reste fixe derrière le contenu défilant.

7
rev087

ok, alors je construis déjà ce site, la partie avec un fond fixe serait foirée si je l’enveloppais dans une div pour lui donner une position fixe. Alors j'ai écrit ça et ça marche sur l'iPhone.

J'ai un en-tête fixe, donc c'était facile à utiliser, mais tout ce qui est toujours en haut de la fenêtre fera l'affaire ...

        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); 

        }

puis donnez à l'élément pour donner à un «arrière-plan fixe» une transition sur la position de l'arrière-plan et vous avez terminé. Pas si chou que ... et j'ai l'impression qu'il y a une meilleure solution ... mais ça marche.

0
Sjerp van Wouden

1) z-index: -1; doit être ajouté à la seconde approche de Breezer si vous avez des images de lien, sinon les images sont cachées (derrière le fond)

2) Sur la même approche, je devais mettre la div avant le reste du contenu comme suit ou la page ne pouvait pas défiler si le contenu était ajouté à l'intérieur des balises div:

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

0
Rafael