web-dev-qa-db-fra.com

Le fond de corps fixe défile avec la page sur iOS7

J'ai utilisé le CSS suivant pour créer un arrière-plan de corps fixe. Cela fonctionne bien sur presque tous les navigateurs sauf le nouvel iOS7. Sur ce dernier, l'arrière-plan n'est plus fixe. Il défile avec la page. Une idée de comment résoudre le problème?

body
{
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;     
}

À VOTRE SANTÉ

htmlcssbackground-image
6
Gloria

Je vais essayer de trouver une référence, mais les navigateurs mobiles forcent background: scroll parce que le repeindre est trop coûteux.

Référence:

CSS - Les images d'arrière-plan ne s'affichent pas correctement sur les navigateurs mobiles

@PaulIrish a également noté ceci:

Les arrière-plans fixes ont énorme coût de repeindre et décimer les performances de défilement, ce qui explique, je crois, pourquoi il a été désactivé.

Il y a des moyens de contourner cela, cependant… mais ce n'est pas une solution rapide. Regardez la question suivante et son commentaire.

Android/Mobile Webkit CSS Background-Attachment: Corrigé ne fonctionne pas?

7
Labu

Je recommanderais de regarder dans scrollr ( https://github.com/Prinzhorn/skrollr ). C'est une bibliothèque de parallaxe permettant d'obtenir le même effet. Ils ont également étudié avec soin les problèmes liés aux appareils mobiles:

Quelques mots expliquant pourquoi il s’agit d’un jalon important et pourquoi d’autres ont échoué: Les navigateurs mobiles tentent d’économiser de la batterie partout où ils le peuvent. C'est pourquoi les navigateurs mobiles retardent l'exécution de JavaScript pendant le défilement. iOS en particulier le fait très agressivement et arrête complètement JavaScript. En bref, c’est la raison pour laquelle de nombreuses bibliothèques avec défilement ne fonctionnent pas sur les appareils mobiles ou viennent avec leur propre barre de défilement, cauchemar de la convivialité sur le bureau. Pendant que je développais skrollr, c’était une exigence importante que je ne vous oblige pas à faire défiler la page comme je le souhaite. skrollr sur le bureau utilise une barre de défilement native et vous pouvez faire défiler la façon dont vous le souhaitez (clavier, souris, etc.).

Vous venez de me dire que cela ne fonctionne pas sur mobile, mais pourquoi ça marche? La réponse est simple Lorsque vous utilisez skrollr sur mobile, vous ne faites pas défiler. Lors de la détection d'un navigateur mobile, skrollr désactive le défilement natif. Au lieu de cela, il écoute les événements tactiles et déplace le contenu (plus spécifique, l'élément # skrollr-body) à l'aide de transformations CSS.

Voici un exemple de la mise en œuvre classique en arrière-plan de la parallaxe: http://prinzhorn.github.io/skrollr/examples/classic.html

Sur la page d’exemple, un autre joyau à noter:

Dégradation sans JavaScript (peut être désactivé sur mobile sans tout casser).

3
ctrlplusb

Vous pouvez également utiliser Backstretch jquery.

Ce n'est pas lourd et fonctionne bien sur iOS 7.

2
Frinz

J'ai eu une très simple solution pour cela, après avoir lutté avec toutes les méthodes pour résoudre ce problème.

j'ai eu le problème sur mes appareils mobiles IOS.

css (bureau)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Ensuite, je l’écrase avec une requête de média supprimant "corrigée" comme pièce jointe en arrière-plan.

css (mobile)

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Définit cette propriété sur sa valeur par défaut. Je pense que parce que IOS n'accepte pas 'fixe', il retombe à une valeur par défaut qu'il accepte, faites défiler.

Cela a fonctionné pour moi sur chaque appareil. J'espère que cela aide aussi quelqu'un d'autre.

1
Ylama

J'ai remarqué le problème de la pièce jointe à l'arrière-plan lors de la mise à niveau vers iOS7. J'ai dû résoudre le problème en utilisant Javascript car je ne pouvais pas trouver une solution avec CSS seul.

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}
1
xess

J'ai cherché et utilisé les bases de la solution Prinzhorn sur github. Merci, cela fonctionne parfaitement. Je n'ai qu'une image d'arrière-plan qui s'affiche sur tous les appareils, à l'exception de l'iPad, et maintenant l'image attachée à l'arrière-plan = fixe et la taille de l'image de fond: couverture.

0
tosca

Déconner avec la taille de l’arrière-plan, j’ai trouvé que si la taille de votre bureau pouvait être couverte et que la position pouvait être corrigée, alors sur la requête du support, créez le background-size: 100% 100vh

J'ai posté la réponse sur une autre question ici.

0
pjdux