web-dev-qa-db-fra.com

Chrome avec les éléments fixes en arrière-plan et les éléments fixes de position

J'ai eu ce problème pendant un certain temps et il semble que ce soit un Chrome qui n'a pas été corrigé. Je recherche donc des correctifs pour combler l'écart.

Le problème principal est que lorsqu'un élément de la page a une image d'arrière-plan qui utilise:

background-attachment: fixed;

Si un autre élément est fixe et comporte un élément vidéo enfant, l'élément avec l'image d'arrière-plan disparaît.

Maintenant, cela fonctionne bien dans Safari (et Firefox et IE), ce n'est donc pas exactement un problème de kit Web. J'ai appliqué plusieurs propriétés qui ont été suggérées en vain.

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

Démo initiale

Actuellement, ma solution consiste simplement à cibler les éléments avec une image bg fixe via une requête multimédia et à désactiver la propriété d'arrière-plan fixe.

@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}

Des idées?

Mise à jour

Working Demo merci à Daniel.

Update 2

Meilleure démo!

Shoutout to somesayinice and FourKitchens blog post

cssgoogle-chromewebkitfixedbackground-attachment
34
Alex

Trouvé cette solution sur: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Il me semble que c'est une façon intelligente d'utiliser: avant le pseudo-élément. Limitez la largeur pour les éléments à largeur fixe, mais fonctionne très bien pour les pages pleine largeur. Sort essentiellement pour ressembler à ceci:

.background_fill {
  overflow: hidden;
  position: relative;
    color: red;
}
.background_fill:before {
  background-color: white;
  background-size: cover;
  z-index: -3;
  content: " ";
  position: fixed;
  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;
  will-change: transform;
  width: 100%;
  height: 100%;
}
<div class="background_fill">
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
  <div>this is on a background / this is on a background / this is on a background / this is on a background / this is on a background / this is on a background</div>
</div>

Fonctionne très bien pour moi comme moyen de contourner ce bug très ennuyeux.

8
somesayinice

Étant donné qu'un arrière-plan positionné fixe semble se casser sans raison dans Chrome, vous pouvez essayer de jouer avec les propriétés clip et position:fixed. Ce n'est pas très connu, mais la propriété clip lorsqu'elle est définie sur un élément positionné absolu recadrera même les éléments enfants positionnés fixes .

Il y a cependant quelques inconvénients. Plus important encore, cette astuce ne fonctionne malheureusement pas parfaitement sur iOS pour une raison quelconque, alors que le navigateur a des problèmes pour rendre l'image entière pendant que l'utilisateur fait défiler (vous obtenez un effet pop-in ). Ce n'est pas quelque chose de trop important, mais peut-être quelque chose que vous devriez prendre en considération. Bien sûr, vous pouvez toujours contourner cela en utilisant par exemple un javascript intelligent qui retombe sur un arrière-plan fixe. Une autre solution de contournement iOS consiste à simplement utiliser -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) qui est fondamentalement une alternative spécifique à webkit pour clip: rect(auto,auto,auto,auto) (c'est-à-dire tout rogner en dehors du conteneur).

J'ai créé un exemple d'implémentation JSFiddle (codepen ne voulait pas jouer avec moi) pour savoir comment vous pouvez le faire. Regardez spécifiquement .moment, .moment-image Et le nouveau .moment-clipper.

J'espère que cela vous sera utile!

Mise à jour: le clip est désormais obsolète au profit du clip-path, mais il est toujours en cours d'écriture pris en charge dans tous les navigateurs. Le même effet peut cependant être obtenu avec:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;

position: absolute N'est plus requis sur le contenant. Le support du clip-path semble être relativement limité, avec seulement Chrome et Safari le supporte actuellement avec des préfixes. Le pari le plus sûr est probablement d'inclure à la fois le clip et le clip-path car ils n'apparaissent pas pour interférer les uns avec les autres.

J'ai mis à jour le violon ci-dessus pour inclure également le clip-path.

34
Daniel Perván

Comme vu sur ce grand stylo par Raphael Rychetsky , translate3d Peut être le fauteur de troubles.

Si vous utilisez transform: translate3d(0,0,0), essayez de le remplacer par transform: translate(0,0) et il devrait faire l'affaire. Au moins, cela a fonctionné pour moi.

2
Hugo H

Une réponse tardive, mais je suis venu avec cela et j'ai en quelque sorte fait un hack pour celui-ci.

L'idée était de créer un élément interne qui contiendra l'image d'arrière-plan et agira de la même manière que background-attachment:fixed propriété.

Puisque cette propriété fait la position de l'image d'arrière-plan par rapport à la fenêtre, nous devons déplacer l'élément intérieur dans son conteneur et de cette façon nous obtiendrons cet effet.

var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
    "background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
    "background-position" : "center center",
    "background-repeat" : "no-repeat",
    "background-size" : "cover",
    "position" : "absolute",
    "height" : $(window).height(), /*Make the element size same as window*/
    "width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it's parent*/
$(window).scroll(function(){
    var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
    $(".px_bg_holder").css({
        "margin-top" : bg_pos+"px"
    });
});
$(window).resize(function(){
    $(".px_bg_holder").css({
        "height" : $(window).height(),
        "width" : $(window).width()
    });
});
2
Burimi

Salut, c'est très simple, pas besoin d'ajouter de balise webkit et multimédia, suivez simplement ci-dessous

  1. étapes j'ai supprimé la balise Url d'arrière-plan dans le conteneur ci-dessous

.content .container {/ * background: url ( http://beeverlyfields.com/wp-content/uploads/2015/02/bgBeeverly4.jpg ); * /

  1. j'ai ajouté la balise img src dans class = "container" et la position comme fixe et top = 0

enter image description here maintenant son travail dans chrome-40 et IE

1
Arul Sidthan

Mon problème était que j'animais une transformation 3D en vol stationnaire dans un document

.anim-y360:hover {
    -webkit-transform: rotateY(360deg);
    ...
}

Chaque fois que je lance l'animation, l'image fixe disparaissait.

La solution était simple:

.anim-y360 {   
   z-index: XX;
   ...
}

Où XX est supérieur au z-index de l'image à position fixe.

0
totem

Ce problème apparaît généralement en raison de la vidéo HTML5. Il suffit de l'envelopper dans l'élément dom avec la position des règles de style: relative; et débordement: caché; Cela corrigera tout dans tous les navigateurs!

0
Andris

J'ai trouvé une solution de https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

Dans mon cas, donnez simplement cette propriété dans le div du fond fixe.

will-change : transform;
0
Christian Rosandhy