Very odd z-index issue with jquery gallery in ie10

JavaScript
1

I have modified the gallery script from http://usejquery.com/blog/create-unique-gallery-using-z-index-and-jquery and it works fine in all browsers (even IE 7-9) but not it IE10. See it here: http://174.122.126.251/~arblockt/index.html.

The script uses jQueary to change the z-index of the photos of the gallery to make them appear to “shuffle” the top image to the bottom of the stack, but in IE10 the top photo remains on top. If you let it run for a while eventually the top photo will move to the back as it’s supposed to, but the new top photo has the same problem and stays on top. I only noticed this because I left it running while I was away from my desk for about 15 minutes and came back to a new top photo.

The other strange thing is if you resize the IE10 window after the page loads, everything immediately begins to work properly. I’ve been pulling out my non-existent hair over this since yesterday. Does anyone have any idea why this would happen in only IE10?

Thanks in advance for your help!

Here is the modified script:


$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in an animation
  
  $('#pictures img').each(function() { //set the initial z-index's
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to <img>
  });


  function swapFirstLast() {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image
            
    $('#pictures img').each(function() { //process each image
      if($(this).css('z-index') == z) { //if its the image we need to process
        $(this).animate({ 'left' : '-' + $(this).width() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', 1) //set new z-index
            .animate({ 'left' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'left' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + 1); //in/de-crease the z-index by one
        });
      }
    });
    
    return false; //don't follow the clicked link
  }
  
  window.setInterval(swapFirstLast, 3000);

});
2

I figured out the problem, but I don’t know why it happens. I removed all css except that which is required by the script and then added it back 1 style at a time. It turned out that the footer style included position:relative. When I removed this, everything worked perfectly. What’s odd about that is that the footer div is outside and below the gallery’s container element, so I don’t know why this would have an effect on the gallery, and only in IE10.

Though I’ve solved the problem, I’m still curious as to why this happens. Has anyone heard of this situation before and can shed some light on it?

Thanks!