background-attachment:fixed ne fonctionne pas sous chrome
Je suis en train d'élaborer un site web dans lequel j'ai utilisé le background-attachment:fixed
de la propriété. Il fonctionne dans Firefox, mais l'image n'est pas fixe. Dans google Chrome, c'est se comporter de la normale. Voici le code:
CSS:
.AboutBg
{
background-attachment: fixed;
background-image: url("../Images/LandingPage/smart.jpg");
background-position: 0 0;
background-repeat: repeat;
background-size: cover;
height: 90%;
position: absolute;
width: 100%;
}
HTML:
<div class="AboutBg"></div>
Vous devez vous connecter pour publier un commentaire.
J'ai juste eu un problème semblable, mon cover + fixe n'a pas de travail et les images étaient en voie de disparition sur chrome et a été en mesure de le résoudre comme ceci:
Analyse de la hausse des définitions de nœuds et de désactiver certaines propriétés CSS qui pourraient avoir des conflits, dans mon cas par exemple, il y avait une:
backface-visibility: hidden
à la<body>
niveau qui était la cause. Cela a été mis en place par l'animer.framework css.Désolé ce n'est pas une réponse concrète, mais au moins, cela donne une idée de comment déboguer votre code css.
-webkit-animation-fill-mode: both;
dansclass
de.animated
et il a résolu le problème.rien ne fonctionnait pour moi, et finalement il a fait le tour avec aucun raisonnement derrière 🙂
Ce travail est pour moi à la fois firefox et chrome. Espérons que cela aide.
Le Code ci-Dessus devrait fonctionner avec Chrome Pour Windows ,
Juste essayer y compris le vendeur préfixe
Et lui donner un essai
Cela a réglé mon problème:
(a
position: relative
)Bien que cela arrive un peu en retard, en ajoutant le style css ci-dessous semble résoudre le problème pour moi.
Une réponse tardive mais je suis venu avec cela, et en quelque sorte j'ai fait un hack pour celui-ci.
L'idée était de créer un intérieur de l'élément qui va contenir l'image de fond d'écran et agissent de même que
background-attachment:fixed
propriété.Puisque cette propriété rend l'arrière-plan de position de l'image par rapport à la fenêtre, nous devons déplacer l'intérieur de l'élément au sein de son conteneur et de cette façon, nous aurons cet effet.
Pas sûr au sujet d'autres personnes, mais cela a fonctionné pour moi:
Z-index: -1
Avec chrome 42, le fond de la pièce jointe n'a pas de travail pour moi... jusqu'à ce que je ferme les Outils de Dev.
J'espère que cela peut sauver quelqu'un du temps!
bootstrap carrousel était à l'origine pour moi. L'ajout de cette CSS à l'inverse des propriétés de transition, il fixe.
Si
transform: translate3d();
est utilisé n'importe où sur votre site web,background-attachment: fixed;
se brisera dans chrome. Si possible, remplacez toutes les instances detransform: translate3d();
àtransform: translate();
. Cela devrait résoudre votre problème.@sabatino réponse est à droite, mais cela va détruire le background-attachment:fixed comportement dans Firefox, parce qu'ils interprètent aussi -webkit préfixé propriétés - pour quelque raison que ce soit.
De sorte que vous avez à le remplacer comme ça pour le faire fonctionner dans les deux navigateurs: