web-dev-qa-db-fra.com

Comment répliquer une pièce jointe en arrière-plan fixée sur iOS

J'essaie de faire fonctionner des divs à image de fond fixe sur iOS pour un projet scolaire. J'ai utilisé

background-attachment: fixed;

Mais cela conduit à un dimensionnement étrange et à aucun effet de défilement dans un safari mobile. Voici le site que je travaille avec; la méthode que j'utilise actuellement pour les arrière-plans d'image div quote fonctionne bien sur les ordinateurs de bureau mais échoue complètement sur iOS.

D'une manière ou d'une autre, http://www.everyonedeservesgreatdesign.com a fonctionné. Je ne parviens pas à suivre le code car ils utilisent un modèle de type squarespace, mais on dirait qu'ils insèrent des images dans un position:fixed div qui est en quelque sorte coupé par son position:relative parent div. J'avais l'impression qu'il n'était pas possible de découper position:fixed div avec autre chose que la fenêtre d'affichage. Je suis donc très curieux de savoir ce qui se passe ici.

Des idées sur la manière de mettre en œuvre cette méthode pour les arrière-plans div d’images fixes sur mon site?

73
QRohlf

Cela a été demandé dans le passé, apparemment cela coûte cher aux navigateurs mobiles, donc il a été désactivé.

Check ce commentaire de @PaulIrish :

Les fonds fixes ont un coût énorme et un rendement de défilement décimé, ce qui explique, je crois, pourquoi il a été désactivé.

vous pouvez voir des solutions de contournement à cela dans ces messages:

Image d'arrière-plan fixe avec ios7

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

105
fernandopasik

Il me semble que les images d’arrière-plan ne sont pas réellement des images d’arrière-plan ... le site contient les images d’arrière-plan et les citations des divs-frères avec les enfants de la div contenant les images ayant la position assignée: corrigé; Les citations div est également donné un fond transparent.

wrapper div{
   image wrapper div{
       div for individual image{ <--- Fixed position
          image <--- relative position
       }
   }
   quote wrapper div{
       div for individual quote{
          quote
       }
   }
 }