(AdSense) Iframe float flicker fix

Monday, October 24th , 2005

Update: Looks like Firefox 1.5 no longer suffers from the bug so go upgrade now!!

Update: This solution may not work as advertised. I ended up not using it in my own project. Watch this space for the solution I did use.

Up until a few days ago I thought that this bug was unique to the project I was working on. For reasons that are beyond the scope of this post, I needed to float a div containing an iframe. The problem was that, due to a bug in Firefox’s rendering engine, there would be a brief flicker where the iframe would appear in the far left of the screen while the rendering engine decided what content went around the floated div. To make matters worse, I needed to animate—expand/retract—the div in question. As a result, every frame of the animation would cause the iframe to flicker. That of course was unbearable and unacceptable.

Now, I say up until a few days ago because I recently realized that this problem plagued anyone who floated Google’s AdSense ads, since they too are contained in an iframe.

Well, if you’ve been dying for a solution, here it is:

Code Sample

<style type="text/css">
div
{
  float: left;
}
#parent
{
  display: table;
}
#child
{
  float: none;
  display: table-cell;
}
</style>

<div id="parent">
  <div id="content">
    <p>content content content ...</p>
    <p>content content content ...</p>
    <p>content content content ...</p>
  </div>
  <div id="child">
    <iframe src="http://arapehlivanian.com"></iframe>
  </div>
</div>

Explanation

The solution is fairly straightforward. Because the bug is caused by the float, we remove the float from the div that contains the iframe. However, in order to make sure that the div still behaves as though its floating, we assign it the display: table-cell; rule. In order to make sure that this rule is also respected in Safari, we add the additional display: table; rule to the parent div—which isn’t required in Firefox. None of this is an issue in IE as it ignores both the table and table-cell values and floats the trailing div nonetheless (unless you clear: left it).

I hope I didn’t leave anything out. Of course, you may need to tweak this code for your own purposes but the core of it works just fine. Enjoy, and let me know if this helped you.

–30–

/ (AdSense) Iframe float flicker fix

Code Sample

Explanation