Image fixe de l’arrière-plan de la pièce jointe scintille / disparaît dans le chrome lorsqu’elle est associée à une transformation css

Je fais actuellement un thème de site Web de parallaxe. Les images d’arrière-plan doivent être attachées de manière fixe pour certaines sections de «div et de» afin d’éviter que tout soit compliqué. Le problème était que les images d’arrière-plan des balises sous un élément animé avaient disparu pendant la transformation, uniquement sur Google Chrome. Remède?

    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-visibility: hidden’ s’est avéré moins qu’inutile (sur mon arrière-plan ‘corrigé’), car l’arrière-plan a tout simplement disparu lorsqu’il a été défini. ( Informations supplémentaires: la raison en est que lorsque l’arrière-plan est défini comme fixe, il est presque similaire à placer un «div» fixe en arrière-plan et à définir l’arrière-plan div original comme transparent .

    Pour résoudre le problème actuel, essayez de définir la propriété ‘ position ‘ de l’élément comme ” statique ” ou, si vous lui avez donné une autre valeur, à savoir ” relative “, ” fixe ” ou ” absolue “, supprimez-les.

    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 sur chrome ou firefox pour

    assurez-vous qu’il n’y a pas de valeurs définies manuellement dans la propriété ‘position’ autre que ‘static’.

    Je viens juste de passer une demi-heure à chercher … Je pensais que ça pourrait te rendre la vie plus facile. 🙂

    Même problème ici. J’avais un en-tête collant utilisant la position:fixed; qui scintillait dans PC Chrome 34. J’ai essayé les solutions dans ce fil, position:static; dans le parent a cassé d’autres parties. Mais je sais append -webkit-transform: translate3d(0,0,0); En gros, Chrome transforme ce fichier HTML en un calque 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
    réponse à l’avenir est d’utiliser la propriété will-change pour créer un calque!
    W3 specs
    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 corriger le scintillement, mais en substance, cela fait de l’élément un calque, identique à translate3d ().

    Peut-être un peu tard pour répondre, mais il semble que le bug vienne avec l’attachement en arrière-plan: propriété fixe en chrome. J’ai trouvé une solution qui change sa valeur pour “faire défiler”. Cela provoquera un effet de jitterin sur Firefox, mais vous pouvez l’éviter en utilisant une requête de 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 cela aide!

    J’avais le même problème avec Chrome, il semble y avoir un bogue qui se produit quand il y a trop de choses à l’intérieur de la page, j’ai pu le corriger 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, quant à elles, s’exécutent dans le contexte du navigateur, ce qui permet au logiciel d’effectuer la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web a rattrapé 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.

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

    Note: translate3d (0,0,0) ne fait rien en termes de ce que vous voyez. il déplace l’object de 0px dans les axes x, y et z. C’est seulement 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*/ } 

    Pour moi, le problème était que les styles s’attachent aux éléments parents du div qui a le fond fixe, je mets -webkit-backface-visibility: inherit; aux deux parents principaux de ma division fixe.

    dans mon cas, j’utilisais la fondation hors-canvas donc ça va comme ça

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

    Cela m’a vraiment énervé et ça a presque gâché ma nuit. Mon correctif est de définir

     background-attachment: scroll; 

    Cela a fonctionné sur mon projet.
    Avant cela, je l’avais sur fixe. J’espère que cela t’aides.

    Nous avons eu un problème similaire avec une position: fixed; élément. Cet élément contenait un conteneur relativement positionné, contenant une image absolument positionnée. Sur la transition CSS, l’image a disparu, lorsque la transition a été effectuée est réapparue.

    Nous avons essayé de résoudre le problème en définissant la -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, nous avons utilisé l’inspecteur Web de Chrome pour manipuler les propriétés des éléments et, heureusement, nous avons pu résoudre le problème sans avoir à modifier autant le site. (il suffisait de changer la position du parent de l’élément fixe en static )

    Voici une solution qui fonctionne (2014.7.11) sur firefox 30.0, chrome 35.0, opera 22.0, soit 11.0:

    ÉTAPE 1: ajoutez ces lignes à .htaccess :

     # cache for images  Header set Cache-Control "max-age=10000, public"  

    ÉTAPE 2: ajoutez des images préchargées, 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]); } } 

    PS merci Shawn Altman

    Ma tâche était de créer une page avec un effet de parallaxe. Après avoir essayé de résoudre ce problème au moyen de CSS, je suis arrivé à 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 en arrière-plan fixé.

    Je suis donc sur Chrome version 40 et je vois toujours ce problème. La solution de contournement qui fonctionne pour moi en ce moment est de créer une position de paramètre div interne relative à ce div et de la faire correspondre à la hauteur de son parent et de définir l’arrière-plan de la div parent avec une pièce jointe en arrière-plan:

     
    // Code goes here including absolute posiioned elements

    Le problème semble se poser lorsque vous avez un attachement relatif à la position et à l’arrière-plan fixé sur le même élément dans mon cas.

    J’espère que cela t’aides.

    J’ai aussi eu les mêmes problèmes en chrome

    il est très simple de ne pas append de webkit et de tag média, suivez les étapes ci-dessous

    1. au lieu de background: url (‘path-to-image’) définissez l’image comme ci-dessous et définissez la position comme étant fixe

    2. il fonctionnera aussi bien en chrome qu’en IE

    Celui-ci est tardif pour faire la fête mais une découverte étonnante, car je peux voir la plupart des utilisateurs de framework CSS, Bootstrap, Foundation (autres), et je suis sûr que beaucoup d’entre vous ont fait défiler vers le haut. lorsque l’utilisateur commence à défiler vers le bas,

    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, sur scroll, via js (animation.css, waypoints.js, velocity.js)
    Supprimez si possible la transition / classe de cet élément ou revérifiez quand cet élément apparaît afin de corriger le problème de Chrome agité.

    Ajoutez la propriété de 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(http://soffr.miximages.com/background/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/

    J’ai eu ce problème sur la fenêtre de superposition div ci-dessous (disparaissant au hasard dans l’opéra 20) – à la fois animés et activés par script.

     

     .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’overlay était positionné de manière absolue (.popupoverlay), mais dans un conteneur qui n’était pas positionné de quelque manière que ce soit. J’ai copié le positionnement absolu de la superposition sur 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 si aidé quelqu’un. Cordialement

    Semble bogue dans Chrome dès que vous ajoutez un balisage sur l’élément. Essayez de supprimer l’arrière-plan de cet é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 balisage à l’intérieur.

    Exemple:

    Actuel:

     

    Corrigée:

      

    J’espère que cela aide!

    Une autre solution si vous devez avoir la position: fixed / relative / absolute peut-être parce que vous avez un élément positionné de manière absolue (comme c’était le cas) pour créer un div wrapper à l’intérieur du div scintillant.

    par exemple

    tu avais –

     

    Solution de contournement possible

     

    Je n’ai plus le scintillement, apparemment le bug de scintillement ne descend pas vers les conteneurs enfants.