Results 1 to 2 of 2

Thread: Very odd z-index issue with jquery gallery in ie10

  1. #1
    Join Date
    Feb 2004

    Question Very odd z-index issue with jquery gallery in ie10

    I have modified the gallery script from http://usejquery.com/blog/create-uni...dex-and-jquery and it works fine in all browsers (even IE 7-9) but not it IE10. See it here:

    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 Wednesday. Does anyone have any idea what the problem is and why it only happens in 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 a 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. #2
    Join Date
    Feb 2004
    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?


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center