Fijo archivo adjunto parpadeo de imagen de fondo / desaparecer en chrome cuando se combina con una transformación css

El mismo problema aquí. Tenía un encabezado pegajoso usando position:fixed; que parpadeó en PC Chrome 34. Probé las soluciones en este hilo, position:static; en el padre rompió otras partes. Pero sé que agregar -webkit-transform: translate3d(0,0,0); básicamente hace que Chrome convierta ese html en una capa para que no se vuelva a pintar. Eso funcionó para mí.

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

UPDATE
la respuesta amigable para el futuro es usar la propiedad will-change para crear una capa!
W3 especificaciones
CanIUse
MDN definición

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

Y seré honesto, esto parece una solución extraña para arreglar el parpadeo, pero en esencia hace que el elemento sea una capa, igual que translate3d().

Tal vez un poco tarde para responder, pero parece que el error viene con la propiedad background-attachment: fixed en chrome. Encontré una solución que cambiaba su valor a "scroll". Causará un efecto jitterin en Firefox, pero puedes evitarlo usando una consulta de navegador de medios en tu CSS, algo como esto:

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

Espero que ayude!

Estaba teniendo el mismo problema con Chrome, parece ser un error que se produce cuando hay demasiado en el interior de la página, fui capaz de solucionarlo mediante la adición de la siguiente transformar el código al elemento de posición fija, (transform: translateZ(0);-webkit-transform: translateZ(0);) que obliga al navegador a utilizar la aceleración de hardware para acceder a la unidad de procesamiento gráfico del dispositivo (GPU) para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite al software hacer la mayoría (si no todo) de la representación, lo que resulta en menos caballos de fuerza para las transiciones. Pero la Web se ha estado poniendo al día, y la mayoría de los proveedores de navegadores ahora proporcionan aceleración de hardware gráfico por medio de reglas CSS particulares.

Usando-webkit-transform: translate3d(0,0,0); activará la GPU para las transiciones CSS, haciéndolas más suaves (FPS más altos).

Nota: translate3d(0,0,0) no hace nada en términos de lo que ves. mueve el objeto en 0px en los ejes x, y y z. Es sólo una técnica para forzar la aceleración de hardware.

#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*/
}

Para mí el problema fue que los estilos se adjuntan a los elementos padre del div que tiene el fondo fijo, puse -webkit-backface-visibility: inherit; a los dos padres principales de mi div fijo.

En mi caso yo estaba usando la fundación fuera de lienzo por lo que va así

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

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

Esto realmente me molestó y casi arruinó mi noche. Mi solución es establecer

background-attachment: scroll;

Funcionó en mi proyecto.
Antes de esto, lo tenía arreglado. Espero que esto ayude.

Tuvimos un problema similar con un elemento position: fixed;. Este elemento contenía un contenedor relativamente posicionado, que contenía una imagen absolutamente posicionada. En la transición CSS la imagen desapareció, cuando se realizó la transición vuelve a aparecer.

Intentamos resolver el problema estableciendo -webkit-backface-visibility a hidden en varios elementos, incluido el elemento body, pero esto no ayudó. Con la ayuda de este hilo utilizamos web inspector de Chrome para juguetear con elments ' position propiedades y afortunadamente fueron capaces de resolver el problema sin tener que alterar el sitio que mucho. (todo lo que teníamos que hacer era cambiar la posición del padre del elemento fijo a static)

Aquí hay una solución que funciona (2014.7.11) en firefox 30.0, chrome 35.0, opera 22.0, ie 11.0:

PASO 1: añadir estas líneas en .htaccess :

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

• descripción detallada de este problema y cómo solucionarlo: https://code.google.com/p/chromium/issues/detail?id=102706

PASO 2: añadir imágenes precargadas, por ejemplo :

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.d. gracias Shawn Altman

Mi tarea era crear una página con un efecto de paralaje. Después de los intentos de arreglar esto por medio de CSS se me ocurrió la siguiente solución.

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 sería el elemento con background-attachment fijo.

Así que estoy en la versión de Chrome 40 y todavía viendo este problema. La solución que está funcionando para mí en este momento es crear un div interno estableciendo la posición relativa en ese div y haciendo que se ajuste a la altura de su padre y estableciendo el fondo en el div padre con un adjunto de fondo de fijo:

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

El problema parece ocurrir cuando se tiene una posición relativa y un archivo adjunto de fondo fijo en el mismo elemento en mi caso.

Espero que esto ayude.

También tuve los mismos problemas en chrome

Es muy simple no hay necesidad de agregar ninguna etiqueta webkit & media simplemente siga los pasos a continuación

1.en lugar de background:url ('path-to-image') establece la imagen como abajo y establece la posición como fixed

2. funcionará en Chrome, así como el navegador IE

Este llega tarde a la fiesta, pero es un descubrimiento increíble, como puedo ver en su mayoría los usuarios de css framework, Bootstrap, Foundation (otros) , tienen problemas, y estoy seguro de que muchos de ustedes también tienen funciones de desplazamiento a la parte superior de js que muestran el botón de desplazamiento a la parte superior como el usuario comienza a desplazarse hacia abajo,

Si tienes algo como esto ( Bootstrap lo tiene incorporado )

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

O estás mostrando algún elemento vía,

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

O está agregando cualquier tipo de elemento o clase de elemento con transición , en desplazamiento hacia abajo, a través de js (animación.css, waypoints.js, velocidad.js)
eliminar transición / clase si es posible de ese elemento o volver a comprobar cuando ese elemento aparece con el fin de solucionar el problema de Chrome entrecortado.

Agregue la propiedad transform a su elemento con imagen de fondo fija. Puedes tener cualquier posición establecida.

#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 /

He tenido este problema en la superposición div debajo de la ventana emergente (desapareciendo aleatoriamente en opera 20) - tanto animado, y activado por 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;
}

Superposición se colocó absolutamente (.popupoverlay), pero en el contenedor que no se posicionó de ninguna manera. He copiado el posicionamiento absoluto de overlay a parent (.popup) y funciona bien.

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

Creo que el problema aparece solo cuando el posicionamiento de los elementos padre no es obvio.

Me alegro de haber ayudado a alguien. Regards

Parece tener un error en Chrome en el momento en que se agrega cualquier marcado en el elemento. Trate de eliminar el fondo de dicho elemento y darle una posición: relativa. Dentro del elemento agregue un nuevo div con las dimensiones que necesita y agregue el fondo, simplemente no agregue ningún marcado dentro de él.

Ejemplo:

Corriente:

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

Corregido:

 <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>

Espero que ayude!

Otra solución alternativa si debe tener position: fixed/relative/absolute tal vez porque tiene un elemento absolutamente posicionado dentro (como fue mi caso) es crear un div de envoltura dentro del div parpadeante y mover la propiedad position y background a eso.

Por ejemplo

Tenías-

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

Posible solución

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

Ya no tengo el flicker, aparentemente el flicker bug no desciende a contenedores hijos.