css - guardar - inspeccionar elemento google chrome

Problema de Chrome con elementos fijos de fondo y posición de elementos fijos

Question

He tenido este problema por un tiempo y parece ser un error de redibujado de Chrome que no se ha solucionado. Por lo tanto, estoy buscando soluciones parciales.

El problema principal es que cuando un elemento de la página tiene una imagen de fondo que utiliza:

background-attachment: fixed;

Si se arregla otro elemento y tiene un elemento de video hijo, hace que desaparezca el elemento con la imagen de fondo.

Ahora funciona bien en Safari (y Firefox e IE) por lo que no es exactamente un problema de webkit. He aplicado varias propiedades que se han sugerido sin resultado.

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

Demo inicial

Actualmente, mi solución es solo dirigir los elementos con una imagen fija de BG a través de una consulta de medios y simplemente desactivar la propiedad de fondo fijo.

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

¿Algunas ideas?

Actualizar

Demostración de trabajo gracias a Daniel.

Actualización 2

Mejor demo!

somesayinice a somesayinice y la publicación del blog FourKitchens

Answer 1

Como se ve en este gran bolígrafo de Raphael Rychetsky , translate3d puede ser el alborotador.

Si usa transform: translate3d(0,0,0) , intente reemplazarlo por transform: translate(0,0) y debería hacer el truco. Al menos funcionó para mí.

Answer 2

Dado que un fondo posicionado fijo parece romperse sin razón en Chrome, puede intentar jugar con el clip y la position:fixed propiedades position:fixed . No es muy conocido, pero la propiedad del clip cuando se establece en un elemento de posición absoluta incluso cosecha elementos fijos de posición fija .

Sin embargo, hay algunos inconvenientes. Lo que es más importante, este truco lamentablemente no funciona a la perfección en iOS por alguna razón, mientras que el navegador tiene problemas para renderizar toda la imagen mientras el usuario está desplazándose (se obtiene un efecto pop-in ). No es algo excesivamente importante, pero tal vez algo que debe tener en cuenta. Por supuesto, aún puedes evitar esto usando, por ejemplo, algún javascript inteligente que retroceda a un fondo fijo. Otra solución de iOS es simplemente usar -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%) que es básicamente una alternativa específica de webkit para clip: rect(auto,auto,auto,auto) (es decir, recortar todo lo que esté fuera del contenedor).

Hice un JSFiddle implementación de JSFiddle (codepen did not want to me) para saber cómo puedes hacer esto. Mire específicamente en .moment , .moment-image y el nuevo .moment-clipper .

¡Espero que esto sea de ayuda!

Actualización: Clip ahora está en desuso en favor de clip-path, pero desde el momento de la escritura sigue siendo compatible con todos los navegadores. Sin embargo, se puede lograr el mismo efecto con:

-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 ya no es necesaria en el contenedor. El soporte para clip-path parece ser relativamente limitado, con Chrome y Safari soportándolo con prefijos. La apuesta más segura es probablemente incluir tanto clip como clip-path, ya que no parecen interferir entre sí.

He actualizado el violín anterior para incluir también clip-path.

Answer 3

Encontré esta solución en: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Me parece que es una forma inteligente de usar: antes del pseudo elemento. Limite el ancho para los elementos de ancho fijo, pero funciona muy bien para páginas de ancho completo. Básicamente sale para verse así:

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

Funciona muy bien para mí como una forma de evitar este error muy molesto.

Answer 4

Encontré una solución en https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

En mi caso, solo dale esta propiedad al div del fondo fijo.

will-change : transform;

Answer 5

Este problema generalmente aparece debido a video HTML5. Solo envuélvalo en el elemento dom con las reglas de estilo position: relative; y desbordamiento: oculto; ¡Esto arreglará todo en todos los navegadores!

Answer 6

Hola, es muy simple, no es necesario agregar ninguna etiqueta de webkit y de medios, solo sigue a continuación

1. Pasos que eliminé la etiqueta Url de fondo en el contenedor siguiente

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

2. agregué la etiqueta img src en class = "container" y la posicioné como fixed y top = 0

ahora está trabajando en Chrome-40 e IE

Answer 7

Mi problema es que he animado 3d transplace hover div en el documento

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

Cada vez que ejecuto la animación, la imagen fija desaparecía.

La solución fue simple:

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

Donde XX es más alto que el índice z de la imagen de posición fija.

Answer 8

Una respuesta tardía pero vine con esto y de alguna manera hice un truco para este.

La idea era crear un elemento interno que contenga la imagen de fondo y que actúe igual que background-attachment:fixed propiedad background-attachment:fixed .

Como esta propiedad hace que la posición de la imagen de fondo sea relativa a la ventana, tenemos que mover el elemento interno dentro de su contenedor y de esta manera obtendremos ese efecto.

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()
    });
});