background - poner - efecto scroll html5
La imagen de fondo de archivo adjunto fijo parpadea/desaparece en cromo cuando se combina con una transformación css (16)
Agregue la propiedad de transform a su elemento con una 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);
}
Actualmente estoy haciendo un tema del sitio web de paralaje. Las imágenes de fondo deben adjuntarse como fijas para ciertas secciones de "div" y "sección" para evitar que jquery se entregue a todo. El problema era que las imágenes de fondo de las etiquetas debajo de cualquier elemento animado desaparecían mientras se realizaba la transformación, solo en Google Chrome. ¿Remedio?
Aquí hay una solución que funciona (2014.7.11) en firefox 30.0, Chrome 35.0, opera 22.0, es decir, 11.0:
PASO 1: agregue 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: agregue precarga de imágenes, 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]);
}
}
PD gracias Shawn Altman
Así que estoy en la versión 40 de Chrome y sigo viendo este problema. La solución alternativa que funciona para mí en este momento es crear una posición de configuración div interna relativa a ese div y hacer que se ajuste a la altura de su principal y establecer el fondo en el div principal con un archivo adjunto de fondo de fixed:
<section style="background-attachment: fixed;">
<div style="position: relative;">
// Code goes here including absolute posiioned elements
</div>
</section>
El problema parece ocurrir cuando tienes un archivo adjunto de posición relativo y de fondo fijo en el mismo elemento en mi caso.
Espero que esto ayude.
El mismo problema aqui. Tenía un encabezado adhesivo con la position:fixed; que parpadeaba en PC Chrome 34. Probé las soluciones en este hilo, position:static; en el padre rompió otras partes. Pero sé que agrega -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... */
}
ACTUALIZAR
la respuesta futura es usar la propiedad will-change para crear una capa.
W3 especificaciones
CanIUse
Definición de MDN
element {
position:fixed;
top:0;
left:50%;
width:960px;
height:50px;
margin-left:-480px;
will-change:top;
/* ...all other CSS... */
}
Y voy a 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 ().
Estaba teniendo el mismo problema con Chrome, parece ser un error que ocurre cuando hay demasiadas cosas dentro de la página, pude solucionarlo agregando el siguiente código de transformación al elemento de posición fijo, ( 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 (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software haga la mayoría (si no todas) de la representación, lo que resulta en menos caballos de fuerza para las transiciones. Pero la Web se ha puesto al día, y la mayoría de los proveedores de navegadores ahora ofrecen aceleración gráfica de hardware mediante reglas de CSS particulares.
Usando -webkit-transform: translate3d (0,0,0); pondrá en marcha la GPU en acción para las transiciones CSS, haciéndolas más suaves (FPS más altas).
Nota: translate3d (0,0,0) no hace nada en términos de lo que ves. mueve el objeto por 0px en los ejes x, yyz. Es solo una técnica para forzar la aceleración del 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*/
}
Este es tarde para una fiesta, pero es un descubrimiento increíble, ya que puedo ver que la mayoría de los usuarios de framework css, Bootstrap, Foundation (otros), tienen problemas, y estoy seguro de que muchos de ustedes también tienen funciones scroll to top js que muestran el botón scroll to top a medida que 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á mostrando algún elemento a través de,
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
o está agregando cualquier clase de elemento o clase de elemento con transición, en desplazamiento hacia abajo, a través de js (animation.css, waypoints.js, velocity.js)
elimine la transición / clase si es posible de ese elemento o vuelva a verificar cuando aparezca ese elemento para solucionar el problema de Chrome entrecortado.
Este ha sido un misterio sin resolver muy común. Recientemente tuve el mismo problema, y ''-webkit-backface-visibility: hidden'' resultó ser menos que inútil (en mi fondo adjunto ''fijo''), ya que el fondo simplemente desapareció cuando se configuró. ( Información adicional: la razón es que cuando el fondo se establece como fijo, es casi similar a poner un ''div'' fijo en el fondo y configurar el fondo div original para que sea transparente. La cara oculta oculta hace lo obvio ).
Para resolver el problema actual, intente configurar la propiedad '' posición '' del elemento como '' estática '', o si le ha dado algún otro valor, es decir, '' relativo '', '' fijo '' o '' absoluto '', simplemente elimínelos.
Si no recuerda establecer la propiedad de posición, y el problema persiste, mi sugerencia es que use una herramienta de depuración en Chrome o Firefox, para
asegúrese de que no haya valores configurados manualmente para la propiedad ''posición'' que no sea ''estática''.
Solo pasé media hora buscando ... Pensé que esto podría hacerte más fácil ... recuerdos. :)
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.
He tenido este problema en la ventana emergente de superposición de div debajo (al azar desapareciendo en la opera 20), ambos animados y activados 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 (.popupolay), pero en el contenedor que no se colocó de ninguna manera. He copiado el posicionamiento absoluto de la superposición al padre (.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 principales no es obvio.
Me alegro si ayudó a alguien. Saludos
Mi tarea era crear una página con un efecto de paralaje. Después de intentar solucionar 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 ítem con fondo adjunto fijado.
Otra solución si debe tener posición: fija / relativa / absoluta, tal vez porque tiene un elemento absolutamente posicionado dentro (como era mi caso) es crear un divisor envoltorio dentro del div parpadeante y mover la posición y la propiedad de fondo a eso.
p.ej
tu tenias -
<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 parpadeo, aparentemente el error de parpadeo no desciende a los contenedores de niños.
Para mí, el problema era que los estilos se conectaban a los elementos principales del div que tenía el fondo fijo, puse -webkit-backface-visibility: inherit; a los dos padres principales de mi div fijo.
en mi caso, yo estaba usando bases desvanecidas, así es como esto
.off-canvas-wrap{
-webkit-backface-visibility:inherit;
}
.inner-wrap{
-webkit-backface-visibility:inherit;
}
Parece que hay errores en Chrome en el momento de agregar cualquier marcado en el elemento. Intenta eliminar el fondo de dicho elemento y dale una posición: relativo. Dentro del elemento agregue un nuevo div con las dimensiones que necesita y agregue el fondo, simplemente no agregue ningún margen 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 eso ayude!
Tal vez un poco tarde para responder, pero parece que el error viene con el archivo adjunto de fondo: propiedad fija en Chrome. Encontré una solución cambiando su valor para "desplazarse". Causará un efecto de jitterin en Firefox, pero puede evitarlo usando una consulta de navegador de medios en su 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 eso ayude!
También tuve los mismos problemas en Chrome
es muy simple, no es necesario agregar ningún tag de webkit y de medios, solo siga los pasos a continuación
1. en lugar de fondo: url (''camino a la imagen'') establece la imagen como a continuación y establece la posición como fija
2. Funcionará en Chrome y en el navegador IE
Tuvimos un problema similar con un position: fixed; elemento. 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 hizo la transición, vuelve a aparecer.
Intentamos resolver el problema al -webkit-backface-visibility en varios elementos, incluido el elemento del cuerpo, pero esto no ayudó. Con la ayuda de este hilo, utilizamos el inspector web de Chrome para virar las propiedades de position y, afortunadamente, pudimos resolver el problema sin tener que modificar mucho el sitio. (Todo lo que teníamos que hacer era cambiar la posición del elemento primario del elemento fijo a static )