web-dev-qa-db-fra.com

Fixation fixe l'image de fond scintille/disparaît en chrome lorsqu'elle est associée à une transformation css

Je fais actuellement un thème de site Web parallaxe. Les images d’arrière-plan doivent être jointes de la même manière que pour certaines sections et sections afin d’éviter de se livrer à tout. Le problème était que les images d'arrière-plan des balises situées sous l'un des éléments animés avaient disparu pendant la transformation, uniquement sur Google Chrome. Remède?

backgroundfixedparallaxflickerbackground-attachment
41
BlackPanther

Cela a été un mystère non résolu très commun. Récemment, j'ai eu le même problème et '-webkit-backface-visibilité: hidden' s'est avéré être moins qu'inutile (sur mon arrière-plan attaché 'fixe'), car l'arrière-plan a tout simplement disparu lorsqu'il a été défini. (Informations additionnelles: la raison en est que, lorsque l'arrière-plan est défini comme fixe, cela revient presque à placer un 'div' fixe à l'arrière-plan et à définir l'arrière-plan div d'origine pour qu'il soit transparent. La face arrière masquée constitue une évidence] .

Pour résoudre le problème actuel, essayez de définir la propriété ' position ' de l'élément comme ' static ', ou si vous lui avez attribué une autre valeur, à savoir 'relative', 'fixed 'ou' absolute ', supprimez-les simplement.

Si vous ne vous rappelez pas avoir défini la propriété position et que le problème persiste, je vous suggère d'utiliser un outil de débogage sous chrome ou firefox pour: 

assurez-vous qu'il n'y a pas de valeur définie manuellement pour la propriété 'position' autre que 'statique'.

Je viens de passer une demi-heure à chercher ... Je pensais que cela pourrait vous faciliter la vie ... salutations. :)

63
BlackPanther

Même problème ici. J'avais un en-tête collant utilisant position:fixed; qui scintillait dans PC Chrome 34. J'ai essayé les solutions de ce fil, position:static; dans le parent a cassé d'autres parties. Mais je sais que l’ajout de -webkit-transform: translate3d(0,0,0); fait en sorte que Chrome transforme ce code HTML en couche afin qu’il ne soit pas repeint. Cela a fonctionné pour moi.

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

METTRE À JOUR
La réponse future est d'utiliser la propriété will-change pour créer un calque!
Spécifications W3
Puis-je utiliser
Définition MDN

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

Et je vais être honnête, cela semble être une solution étrange pour résoudre le scintillement, mais en gros, cela transforme l'élément en couche, comme avec translate3d ().

32
Jason Lydon

Peut-être un peu tard pour répondre, mais il semble que le bogue vienne avec l'attachement à l'arrière plan: propriété fixed en chrome. J'ai trouvé une solution qui change sa valeur en "scroll". Cela provoquera un effet de jitterin sur firefox, mais vous pouvez l’éviter en utilisant une requête du navigateur multimédia dans votre CSS, quelque chose comme ceci:

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

J'espère que ça aide!

14
Santirisco

J'avais le même problème avec Chrome. Il semble que ce soit un problème qui survient lorsque trop de choses se passent dans la page. J'ai pu le résoudre en ajoutant le code de transformation suivant à l'élément de position fixe (transform: translateZ(0);-webkit-transform: translateZ(0);) qui oblige le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) du périphérique afin de faire voler les pixels. Les applications Web, en revanche, s'exécutent dans le contexte du navigateur, ce qui permet au logiciel de rendre la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web est en train de rattraper son retard et la plupart des éditeurs de navigateurs fournissent désormais une accélération matérielle graphique au moyen de règles CSS particulières.

Utilisation de -webkit-transform: translate3d (0,0,0); va lancer le GPU en action pour les transitions CSS, en les rendant plus fluides (FPS plus élevé).

Remarque: translate3d (0,0,0) ne fait rien de ce que vous voyez. il déplace l'objet de 0px sur les axes x, y et z. Ce n'est qu'une technique pour forcer l'accélération matérielle.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
8
Neo

Cela m'a vraiment dérangé et cela a presque ruiné ma nuit. Ma solution est de définir 

background-attachment: scroll;

Cela a fonctionné sur mon projet.
Avant cela, je le faisais réparer. J'espère que cela t'aides. 

4
Ming Huang

Pour moi, le problème était que les styles attachés aux éléments parents de la div ayant l’arrière-plan fixe, j’ai mis -webkit-backface-visibility: inherit; aux deux parents principaux de ma div fixe.

dans mon cas, j'utilisais la fondation hors-toile, donc ça va comme ça

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}
4
Fabian Rios

Nous avons eu un problème similaire avec un élément position: fixed;. Cet élément contenait un conteneur relativement positionné, contenant une image positionnée de manière absolue. Lors de la transition CSS, l'image a disparu et la transition terminée, elle est réapparue.

Nous avons essayé de résoudre le problème en définissant le -webkit-backface-visibility sur hidden sur plusieurs éléments, y compris l'élément body, mais cela n'a pas aidé. Avec l'aide de ce fil de discussion, nous avons utilisé l'inspecteur Web de Chrome pour bricoler avec les propriétés position des éléments. (tout ce que nous devions faire était de changer la position du parent de l'élément fixe en static)

3
lmeurs

j'ai aussi eu les mêmes problèmes en chrome 

c'est très simple, pas besoin d'ajouter une balise webkit & media simplement suivre les étapes ci-dessous

1. au lieu de fond: url ('chemin d'accès à l'image') définit l'image comme ci-dessous et fixe la position

2 . Il fonctionnera en chrome ainsi que dans le navigateur IE 

1
Arul Sidthan

Je suis donc sur la version 40 de Chrome et je vois toujours ce problème. La solution de contournement qui fonctionne pour moi pour le moment consiste à créer une position de réglage de div interne relative à ce div et à l'adapter à la hauteur de son parent et à définir l'arrière-plan sur le div parent avec une pièce jointe à l'arrière-plan fixée:

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

Le problème semble se produire lorsque vous avez une pièce jointe relative et d'arrière-plan fixée sur le même élément dans mon cas.

J'espère que cela t'aides.

1
imdpk

Ajoutez la propriété transform à votre élément avec une image d'arrière-plan fixe. Vous pouvez avoir n'importe quelle position.

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

1
Digggid

Voici une solution qui fonctionne (Firefox 2014.0.11) sur Firefox 30.0, Chrome 35.0, Opéra 22.0, c’est-à-dire 11.0:

ETAPE 1: ajoutez ces lignes à .htaccess:

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

ETAPE 2: ajouter des images de préchargement, par exemple:

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

P.S. merci Shawn Altman

1
web.developer

Celui-ci est tardif pour faire la fête mais une découverte étonnante, Comme je peux le voir en majorité, les utilisateurs du framework css, Bootstrap, Foundation (autres), ont des problèmes, et je suis sûr que beaucoup d’entre vous ont aussi des fonctions de défilement vers le haut qui affichent le défilement vers le haut lorsque l'utilisateur commence à faire défiler l'écran, 

si vous avez quelque chose comme ça (Bootstrap l'a intégré) 

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

ou vous montrez un élément via,

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

ou vous ajoutez n'importe quel type d'élément ou de classe d'élément avec transition, par défilement vers le bas, via js (animation.css, waypoints.js, velocity.js)
Supprimez, si possible, la transition/la classe de cet élément ou revérifiez quand cet élément apparaît afin de résoudre le problème instable de Chrome. 

1
Benn

Ma tâche était de créer une page avec un effet de parallaxe. Après des tentatives pour résoudre ce problème au moyen de CSS, j'ai proposé la solution suivante. 

JavaScript:

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS:

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title serait l'élément avec l'attachement à l'arrière-plan fixé. 

1
Eriks Klotins

Une autre solution de contournement si vous devez avoir position: fixed/relative/absolute peut-être parce que vous avez un élément absolument positionné à l'intérieur (comme ce fut mon cas) consiste à créer un div wrapper à l'intérieur du div scintillant et à déplacer les propriétés position et background à celui-ci.

par exemple.

tu avais -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

Solution possible 

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

Je n'ai plus le scintillement, apparemment, le bogue du scintillement ne descend pas aux conteneurs enfants.

0
Vishu

Une mise à jour presque 5 ans dans le futur ... Cela semble toujours être un problème avec le chrome. J'ai essayé la plupart des solutions mentionnées, notamment l'ajout: 

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

et cela ne règle pas le problème du bégaiement. l'ajout de background-attachment: scroll supprime l'effet de parallaxe qui est crucial pour l'UX du site. La solution ci-dessus qui mentionne l'ajout d'un élément parent ne change rien pour moi. D'autres idées de personnes ayant eu ce problème récemment? J'utilise Gatsby (React) au début. 

0
Dmitriy

Il semble que bug dans Chrome dès que vous ajoutez un balisage sur l'élément. Essayez de supprimer le fond d'un tel élément et donnez-lui une position: relative. À l'intérieur de l'élément, ajoutez un nouveau div avec les dimensions dont vous avez besoin et ajoutez l'arrière-plan. N'ajoutez pas de balises à l'intérieur.

Exemple:

Actuel:

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

Corrigée:

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

J'espère que ça aide!

0
Tatubolitex

J'ai eu ce problème sur la superposition div en dessous de la fenêtre popup (disparaissant de manière aléatoire dans l'opéra 20) - à la fois animée et activée par script.

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

L'incrustation était positionnée absolument (.popupoverlay), mais dans un conteneur qui ne l'était d'aucune façon. J'ai copié le positionnement absolu de la superposition sur le parent (.popup) et cela fonctionne correctement.

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

Je pense que le problème n'apparaît que lorsque le positionnement des éléments parents n'est pas évident.

Heureux d'avoir aidé quelqu'un. Cordialement

0
Przemysław Melnarowicz