Search code examples
jquerycssinternet-explorerfancyboxgalleria

Unwanted transparent background during fade out/in effect in IE8 (jQuery galleria)

I'm creating a new site for my g/f as a surprise for her birthday. However, I'm stuck with a small visual glitch in IE 8 (and probably also 7) that happens with the fade out/in effect when switching images if the gallery of images is in an iframe. In all other browsers, the background stays white so that it looks nice, but in IE it fades out to transparent and then in again.

To reproduce: Go to her new site in IE8, click one of the sections (loads in a fancybox iframe), and observe what happens with the effect when switching images. Now fire up the iframe directly and see that everything looks fine.

During a switch:

IE transparent background for fade out/in

I've tried setting background-color: white everywhere I could think of to no avail. Also, the IE-only property allowtransparency on the iframe element doesn't do much. I've tried allowtransparency="false" and to remove it completely.

Edit: Oh, and galleria seems to do the fade out/in by changing the (inline) style: opacity from 1 to 0 and back again.

Solution

  • Most likely you need to update your version of jQuery

    Currently you have:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

    (the first line would throw a 404 error anyways)

    Try this:

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    and you will see IE magically working as it should. You won't actually need to re-position the close button to make it fit within the box.