iframe white flash

Question

I have a left-hand navigation within my iFrame, with two items, switching between two pages. Sometimes there's a white flash, sometimes there isn't.

Some of the methods I've tried so far:

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';">

Did not do the trick.

jQuery('#jobs-frame').load(function(){
    $(this).show();
});

jQuery('#primary a').click(function(){ 
    //alert('hello');
    jQuery('#jobs-frame').hide();
});

Also did not do the trick. Any other method I've tried out has appeared to be outdated. What's puzzling me is that these above 2 solutions have many comments/feedback saying they work, but in Chrome - the only browser I've tested this in so far - I am still having this issue.

Answer 1

I had a similar problem with iframes that were dynamically generated. On Chrome, toggling visibility removed the white flash, but there was still flickering. On Safari, toggling display actually introduced a related iframe repaint bug.

What ended up working for me was toggling opacity:

<iframe style="opacity: 0;" onload="this.style.opacity = 1;">`