Background images fadeInOut transitions produce a strange effect in white all texts

Question

Well, this problem is rather strange,

I have a website where the background image changes with fadeIn / Out transition

Video: http://www.screenr.com/ZCvs

Web in action: http://toniweb.us/gm

Markup:

<div class="fondo" onclick="descargar(2,500);descargar(1,500);"></div> <div id="headerimgs"> <div id="headerimg1" class="headerimg"></div> <div id="headerimg2" class="headerimg"></div> </div> <!-- Inicio Cabecera --> 

CSS

 .headerimg { background-position: center top; background-repeat: no-repeat; width:100%;position:absolute;height:100%;cursor:pointer; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .headerimg img{ min-width:100%; width:100%; height:100%; } .fondo{ position:absolute; z-index:1; width:100%; height:100%; cursor:pointer; } 

JavaScript:

 /*Gestion de pase de imágenes de fondo*/ $(document).ready(function() { /*controla la velocidad de la animación*/ var slideshowSpeed = 3000; var transitionSpeed = 2000; var timeoutSpeed = 500; /*No tocar*/ var interval; var activeContainer = 1; var currentImg = 0; var animating = false; var navigate = function(direction) { // Si ya estamos navegando, entonces no hacemos nada! if(animating) { return; } currentImg++; if(currentImg == photos.length + 1) { currentImg = 1; } // Tenemos dos, uno en el que tenemos la imagen que se ve y otro d?nde tenemos la imagen siguiente var currentContainer = activeContainer; // Esto puedo optimizarlo con la funci?n modulo, y cambiar 1 y 2 por 0 y 1-> active = mod2(active + 1) if(activeContainer == 1) { activeContainer = 2; } else { activeContainer = 1; } // hay que decrementar el ?ndice porque empieza por cero cargarImagen(photos[currentImg - 1], currentContainer, activeContainer); }; var currentZindex = -1; var cargarImagen = function(photoObject, currentContainer, activeContainer) { animating = true; // Nos aseguramos que el nuevo contenedor está siempre dentro del cajon currentZindex--; //if(currentZindex < 0) currentZindex=1; // Actualizar la imagen $("#headerimg" + activeContainer).css({ "background-image" : "url(" + photoObject + ")", "display" : "block", "z-index" : currentZindex }); // FadeOut antigua // Cuando la transición se ha completado, mostramos el header $("#headerimg" + currentContainer).fadeOut(transitionSpeed,function() { setTimeout(function() { $("#headertxt").css({"display" : "block"}); animating = false; }, timeoutSpeed); }); }; //ver la primera navigate("next"); //iniciar temporizador que mostrará las siguientes interval = setInterval(function() { navigate("next"); }, slideshowSpeed); }); 

there is also an overlay div (fondo class) (height and width 100%), so I can dectect when the background is clicked (I cannot use the background div directly because the transition makes it a negative z-index)

the problem is that this transition creates a weird effect in all white texts

any idea what i'm missing?

Answer 1

I don’t know what caused glitches on your computer, I can’t reproduce it: I am testing using IE7,8,9, the latest Chrome and Firefox on Windows 7. Please provide us with additional information about your setup. Have you visited a 3d-enabled website before testing your site? This seems like a bug in the graphics card. Have you used the latest browser drivers and video cards?

On the other hand, something that you might want to consider makes your fade-in animation easier: it stutters a bit in Chrome after the initial load.

The simplest animation that can do this is window.setInterval with the following code execution:

 function(){ var container = $('#headerimgs'); var current = container.children('div:visible:first'); var next = (current.next().length > 1) ? current.next() : container.children('div:visible'); current.fadeOut(300); next.fadeIn(300); } 

Confuse it a bit with duration to get the exact effect you want. Please note: you need to completely position the div.headerimg so that they completely overlap.

Answer 2

Track the start and end of the attenuation ...

Most likely, this may be an asynchronous error, in which more than one attenuation to / from occurs or the same time occurs, which may be set incorrectly ...

This is more of a conjuncture than an answer , however, these flickering problems with fadeIn / out, as a rule, come down to this (from experience 90 +% of the time).

Also check if you have mouseover / mouseenter CSS properties / events.

Apologizes that I cannot trace it myself: since I cannot reproduce the error.

Random: Chrome sometimes fails to display these asynchronous errors due to being too fast. The error may turn out to be a frame (or its absence), which is actually invisible to the eyes. Similarly, for really fast computers.