Question

I am facing problems with this javascript code. It does a fade every 6 seconds between background and foreground div, to create an slider. It works perfectly on Firefox 9 and probably in lower versions, and I have test that it really works in IE7, IE8 and IE9.

But in chrome it just do the first fading, then the image stays static. Here is the javascript code:

function start_slider () {
    var imgArr = new Array( // relative paths of images
        '/solteros/img/slider/barrancos.png',
        '/solteros/img/slider/karts.png',
        '/solteros/img/slider/parque.png',
        '/solteros/img/slider/canoaraft.png',
        '/solteros/img/slider/paintball.png',
        '/solteros/img/slider/quads.png',
        '/solteros/img/slider/rafting.png'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i=0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 0;
    var intID = setInterval(changeImg, 3000);
    var hs = document.getElementById ( 'header_slider' );    
    var hsb = document.getElementById ( 'header_slider_bkg' );
    if ( hs.style.opacity != 1 ) {
         hs.style.opacity = 1; 
    }

    var foInt = null;
    var fiInt = null;
    var imgUrl = "";

    function changeImg () {
        clearInterval ( intID );
        currImg = ( currImg < preloadArr.length-1 ) ? currImg+1 : 0;
        imgUrl = preloadArr[currImg].src;
        hsb.style.background = 'url('+imgUrl+') top center no-repeat';
        foInt = setInterval ( fadeOut, 50 );
    }

    function fadeOut () {
        if ( hs.style.opacity <= 0 ) {
            clearInterval ( foInt );
            hs.style.background = 'url('+imgUrl+') top center no-repeat';
            hs.style.opacity = 1;
            hs.style.filter = 'alpha(opacity=100);'; /* Para IE8 y anteriores */
            intID = setInterval (changeImg, 6000);
        } else {
            hs.style.opacity -= 0.05;
            hs.style.filter = 'alpha(opacity='+(Math.round(hs.style.opacity * 100))+');'; /* Para IE8 y anteriores */
        }
    }
}

Now, the CSS involved:

#header_slider_bkg {
    width: 1000px;
    height: 410px;
    min-height: 410px;
    margin: 0;
    padding: 0;
    float: left;
    background: url('/solteros/img/slider/rafting.png');
}

#header_slider {
    width: 1000px;
    height: 410px;
    min-height: 410px;
    margin: 0;
    padding: 0;
    float: left;
    background: url('/solteros/img/slider/rafting.png');
}

And so, the HTML:

    <div id="header_slider_bkg">
        <div id="header_slider">
        </div>
    </div>
    <script type="text/javascript">
        start_slider ();
    </script>

The question obviusly is why this fails on Chrome while it works in every other major browsers???

TIA

Answer 1

After installing Chrome Developer Tools and do a bit of debugging, I have found that seems for me like a bug on Chrome javascript engine.

The property hs.style.opacity starts with 1. The first time it does:

hs.style.opacity -= 0.05

It takes an expected value of 0.95. But the second time it gets 0.899999999999999 instead of 0.90 as expected. The loop continues until it gets a value of 0.4999…9684, then it seems to refuse to subsctract 0.05 so the fadeOut interval it is never clear because hs.style.opacity never reach a value of 0 or below.

A quick fix seems to be changing:

if ( hs.style.opacity <= 0 )

by

if ( hs.style.opacity < 0.5 )

But this shows a wider gap between images at last change, so a better solution may be to round the value to two decimals after substraction, so I try a new approach that works fine:

Changing:

hs.style.opacity -= 0.5;

By:

aux = Math.round(hs.style.opacity * 100);
aux -= 5;
hs.style.opacity = aux / 100;

So this is SOLVED.