Background flashes white with in Fancybox iframe

Question

I have been working on a portfolio website where the thumbnails on the home page load a seperate page containing a .cycle jquery slideshow, within a Fancybox. The arrows for the .cycle slideshow are on a transparent background to appear as if they are floating off the edge of the fancy box. Now here lies the problem, when using safari or opera the complete iframe flashes white before the page is loaded properly.

I have done my research and found out that this problem is caused by iframe (http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/). However as my iframes are loading through Fancybox the solution stated on css-tricks.com doesn't apply. I have also been trying the solution put forward by The Infinite Loop Blog on css-tricks.com but have had no luck.

Any help would be greatly appreciated!

Head of index.html

    <!DOCTYPE HTML>
<head>
<title>Forbes Massie</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css"   />
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("#content a").fancybox({
        'padding'           : 0,
        'margin'            : 0,
        'width'             : 1036,
        'height'            : 628,
        'autoScale'         : false,
        'easingIn'          : 'fade',
        'easingOut'         : 'none',
        'opacity'           : true,
        'type'              : 'iframe',
        'centerOnScroll'    : true,
        'overlayOpacity'    : '0.8'
    });

});

</script>
</head>

slideshow.html

    <!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../layout.css" rel="stylesheet" type="text/css"   />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<style type="text/css">
body {
    background-color:transparent;
}
</style>


<script type="text/javascript">

$(document).ready(function(){

$(document).ready(function () {
$('#fade').fadeIn(700);
});

    $('.slideshow').cycle({
    prev:   '#prev1', 
    next:   '#next1', 
    timeout: 0,
    speed: 500,
    after: onAfter
});

if ($('.slideshow') && ($('.slideshow').children().length == 1)) {
    $('#prev1').hide();
    $('#next1').hide();
}

});

function onAfter(curr,next,opts) {
    var caption = (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

</script> 

<title>slideshow10</title>
</head>

<body>

<div id="fade">

<a href="#" id="prev1"><div class="arrows_prev"></div></a>



<div id="box">
    <div class="text">
        <span class="slideshow_p">Title</span>

        <br/>
        <h2>Competition, Tate Modern, London</h2>

        <br/>
        <span class="slideshow_p">Client</span>

        <br/><h2>Carmody Groarke Architects</h2>
    </div>

    <div class="slideshow">
        <img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant_competition_external.jpg" alt="" />

        <img src="../images/10_competition_tate/carmody_groake_tate_modern_members_restaurant Competition_Internal.jpg" alt="" />

    </div>

    <div id="line"> </div> 
</div>

<a href="#" id="next1"><div class="arrows_next"></div></a>

</div>
</body>

</html>

I forgot to say you can see the site at www.adamellison.co.uk/ftp/forbes_massie_website/index.html. — Adam Ellison

Will Kru Will Kru · Accepted Answer · 2011-04-24T19:11:50

Edit the #fancybox-outer background property within the fancybox css file to change the default background color of the iframe.

Background flashes white with in Fancybox iframe

1 Answers